最終舌涨，是到了展示真正技術(shù)的時(shí)候了！通過 產(chǎn)品設(shè)計(jì)務(wù)實(shí)?系列文章的前兩篇（《產(chǎn)品設(shè)計(jì)務(wù)實(shí)：產(chǎn)品為什么“長(zhǎng)”成這個(gè)樣子致份？》和《產(chǎn)品設(shè)計(jì)務(wù)實(shí)：抓住產(chǎn)品的真正核心》）根竿，我們一起分析了產(chǎn)品“容貌”的決定因素是產(chǎn)品本身，也就是說從一個(gè)產(chǎn)品的定位（產(chǎn)品是做什么的）開始猖任，它的形態(tài)基本就已經(jīng)確認(rèn)了你稚；接著，我們從確定了的產(chǎn)品定位和功能出發(fā)朱躺，抽取了產(chǎn)品的兩個(gè)核心：核心元素和核心任務(wù)鏈刁赖，得以在產(chǎn)品基本形態(tài)確認(rèn)（我們可以稱之為“骨骼”確認(rèn)）的基礎(chǔ)上，將產(chǎn)品設(shè)計(jì)繼續(xù)延申和擴(kuò)展长搀，“附之以血肉”宇弛；到了第三步，也是最后一步源请，就是將這“骨骼”和“血肉”的內(nèi)容映射到“可視化”的“表皮”層面枪芒，即原型設(shè)計(jì)，實(shí)現(xiàn)產(chǎn)品的最終具象化谁尸。

骨肉皮

Groupie, 骨肉皮舅踪。在搖滾圈，或者泛娛樂圈里對(duì)一類人的統(tǒng)稱良蛮，多半是女生抽碌。他們追求和明星（可以是影星，歌星决瞳，作家等）發(fā)生關(guān)系（大多數(shù)情況下是肉體货徙，少數(shù)情況為精神上的）。不過皮胡，在今天的引述里是為了其他的用意痴颊，我們借用這個(gè)表達(dá)，并且把它做一個(gè)拆分屡贺，拆分成：骨蠢棱、肉、皮烹笔。

作為生命形體構(gòu)成形式裳扯，骨、肉谤职、皮?剛好按照了肌體構(gòu)成“由內(nèi)核向外延”的方式進(jìn)行排列饰豺，同時(shí)也是按照支撐肌體構(gòu)成、支撐生命體存續(xù)重要程度的“由重向輕”的排列順序允蜈≡┒郑基于此蒿柳，我們借用這個(gè)詞來映射產(chǎn)品的定位和功能，產(chǎn)品的核心元素和核心任務(wù)鏈漩蟆，以及產(chǎn)品的原型設(shè)計(jì)對(duì)于產(chǎn)品本身以及他們之間的相互關(guān)系垒探。

產(chǎn)品的定位和功能是產(chǎn)品的骨。一個(gè)產(chǎn)品是干什么的怠李，從根本上決定了產(chǎn)品最終呈現(xiàn)給用戶的樣子圾叼，如果它是一只霸王龍，那么它就和翼龍不一樣捺癞，它有強(qiáng)壯的大腿夷蚊，用來快速奔跑追逐獵物，而不是長(zhǎng)出一對(duì)翅膀髓介√韫模回到互聯(lián)網(wǎng)產(chǎn)品的定位和功能上，我們大致區(qū)分的話唐础，可以得到這樣的分類：購(gòu)物箱歧、社交、內(nèi)容一膨、工具及游戲呀邢，當(dāng)然手機(jī)應(yīng)用商店的分類會(huì)比這個(gè)要細(xì)致一些，但實(shí)際上都可以歸集到上述五類中的一類或多類（產(chǎn)品功能的跨越性導(dǎo)致的多類型）豹绪。例如驼鹅，我們前述的例子，微信毫無疑問是社交產(chǎn)品森篷，但同時(shí)在不斷的版本迭代帶來的功能的添加之后，它同時(shí)也具有了購(gòu)物的功能（商家小程序等）豺型、內(nèi)容的功能（公眾號(hào)）仲智、工具的功能（各種小程序，比如查詢公交地鐵等到站信息）以及游戲的功能（微信飛機(jī)大戰(zhàn)）姻氨，但這些都不影響微信作為社交產(chǎn)品的定位钓辆，相反地微信通過適度地添加功能不斷強(qiáng)化社交的屬行、誘導(dǎo)社交的行為肴焊。

微信_(tái)飛機(jī)大戰(zhàn)（圖片來自網(wǎng)絡(luò)）

核心元素和核心任務(wù)鏈?zhǔn)钱a(chǎn)品的肉前联。產(chǎn)品向用戶提供那些信息，通過怎么樣的方式娶眷、過程來幫助用戶達(dá)到使用產(chǎn)品的目的似嗤，實(shí)現(xiàn)產(chǎn)品定位和功能的價(jià)值，就是依附在“骨”上的“肉”的職責(zé)届宠。通過“肉”烁落，“骨”具備了一定的形象乘粒，變得豐滿起來，“肉”對(duì)“骨”進(jìn)行了解釋和說明伤塌，并受“骨”的約束灯萍。還是以微信來說，需要展示哪些信息是以滿足社交活動(dòng)這一定位為前提每聪，并服務(wù)于社交活動(dòng)的展開旦棉；操作流程的設(shè)計(jì)也是根據(jù)社交活動(dòng)開展的流程，映射用戶行為并服務(wù)于用戶在這個(gè)過程中的操作而進(jìn)行的药薯。因此绑洛，核心元素的“肉”決定了產(chǎn)品基本的信息架構(gòu)，核心任務(wù)鏈的“肉”決定了產(chǎn)品基本的交互結(jié)構(gòu)果善。

原型設(shè)計(jì)是產(chǎn)品的皮诊笤。蒙在“骨肉”之外的，就是產(chǎn)品的“門面”巾陕，也正是在映射用戶心智的基礎(chǔ)上讨跟，通過符合交互習(xí)慣和用戶使用習(xí)慣的方式把產(chǎn)品的定位和功能，核心元素和核心任務(wù)鏈進(jìn)行的可視化呈現(xiàn)鄙煤、可視化傳達(dá)晾匠。話句話說，原型設(shè)計(jì)所扮演的是產(chǎn)品最終同用戶接觸點(diǎn)的角色梯刚，一個(gè)產(chǎn)品的定位和功能是否符合用戶期望凉馆，所展示的信息是否足夠，設(shè)定的業(yè)務(wù)流程是否清晰流暢亡资，都將最終由原型設(shè)計(jì)來進(jìn)行傳達(dá)澜共。從這個(gè)意義上來說，雖然锥腻，原型設(shè)計(jì)是產(chǎn)品設(shè)計(jì)的“皮毛”嗦董，但是如果這個(gè)“皮毛”不夠靚麗，再好的“骨”“肉”瘦黑，用戶也是沒有興趣京革。

既然直接面向終端用戶的“皮”這么重要，沒辦法像“骨”和“肉”一樣是可以躲起來幸斥，而且更為重要的是——對(duì)于“皮”的設(shè)計(jì)和處理可能是產(chǎn)品經(jīng)理日常進(jìn)行的最多的工作之一匹摇，不管是一整個(gè)APP的設(shè)計(jì)，一個(gè)業(yè)務(wù)模塊的設(shè)計(jì)甲葬，還是一個(gè)功能點(diǎn)的設(shè)計(jì)廊勃。那么，問題來了：怎樣處理“皮”才是正確的呢经窖？

沒有正確答案

這個(gè)問題可能真的沒有絕對(duì)“正確”的答案供搀。因?yàn)橛缇樱^對(duì)正確這個(gè)概念本身并不存在，就原型設(shè)計(jì)來說葛虐，決定原型設(shè)計(jì)的因素有很多胎源，比如網(wǎng)絡(luò)環(huán)境、終端設(shè)備屿脐、用戶群體涕蚤、主流設(shè)計(jì)風(fēng)格、實(shí)現(xiàn)成本以及服務(wù)系統(tǒng)效能等等的诵。不同的影響元素對(duì)于原型設(shè)計(jì)都會(huì)有自己的“價(jià)值”主張万栅，而且有可能互相沖突（比如用戶群體特性的高要求和技術(shù)實(shí)現(xiàn)成本的低儲(chǔ)備）。另外還要看產(chǎn)品定位上對(duì)于某一個(gè)方面的目的的側(cè)重西疤，比如強(qiáng)化商業(yè)轉(zhuǎn)化烦粒、付費(fèi)轉(zhuǎn)化的功能，必然會(huì)對(duì)主業(yè)務(wù)流程的支持上造成一定的影響代赁。但是產(chǎn)品的商業(yè)訴求必須是需要去滿足的扰她，除非是公益性的產(chǎn)品。所以一個(gè)保守但是相當(dāng)?有效 的方式就是向成功的前輩學(xué)習(xí)芭碍，俗稱“抄”徒役。這么做的原因有三：

1、通過實(shí)踐證明的穩(wěn)定性窖壕、可用性和易用性忧勿。在信息架構(gòu)和交互架構(gòu)設(shè)計(jì)領(lǐng)域有著很多經(jīng)過時(shí)間檢驗(yàn)過的定律及法則來作為設(shè)計(jì)的指導(dǎo)，它幫助我們還原作為產(chǎn)品使用者的人的認(rèn)知問題的方式和方法瞻讽、一些普遍的規(guī)律以及不同情境下的行為偏好鸳吸；

2、省去用戶學(xué)習(xí)的成本速勇。就像我們不認(rèn)為有正確的答案一樣层释，信息展示和流程設(shè)計(jì)的實(shí)現(xiàn)方式是多樣的。只不過需要考慮的是快集，用戶接觸到一個(gè)新樣式，新模式的時(shí)候廉白，有多大的興趣去接受你的新模式个初，需要多久的時(shí)間去學(xué)習(xí)，特別是在眾多產(chǎn)品共同搶奪用戶使用時(shí)長(zhǎng)的這個(gè)語境之下猴蹂。

3院溺、良好的微創(chuàng)新的平臺(tái)。在穩(wěn)定磅轻、可用珍逸、易用的前提下逐虚，在保持基本信息架構(gòu)和交互結(jié)構(gòu)的基礎(chǔ)上，根據(jù)產(chǎn)品的需求進(jìn)行“自定義”的微調(diào)整和微創(chuàng)新谆膳，從而實(shí)現(xiàn)通用向創(chuàng)新的自然過渡叭爱。

原型設(shè)計(jì)，最終的具象化

就?原型設(shè)計(jì)?來說漱病，與產(chǎn)品需求文檔不同买雾，它是一個(gè)產(chǎn)品需求的可視化呈現(xiàn)過程，其目的在于產(chǎn)品經(jīng)理同UI設(shè)計(jì)師杨帽、UE設(shè)計(jì)師以及開發(fā)工程師進(jìn)行更準(zhǔn)確漓穿、更有效的溝通，幫助設(shè)計(jì)師和工程師對(duì)于產(chǎn)品需求的可行性和易用性進(jìn)行更直觀的判斷注盈，最終保證實(shí)現(xiàn)效果與需求一致晃危。從這個(gè)意義上說，原型設(shè)計(jì)解決的雖然不是“產(chǎn)品是什么的問題”（當(dāng)然也有團(tuán)隊(duì)直接以原型設(shè)計(jì)作為產(chǎn)品需求文檔）老客，更多的是“產(chǎn)品長(zhǎng)成什么樣子”的問題僚饭。換句話說，原型設(shè)計(jì)可能并不是必需沿量，但肯定是可以更好地幫助我們?nèi)?shí)現(xiàn)產(chǎn)品浪慌。根據(jù)前文推演，我們決定了要通過“抄”的方式來指導(dǎo)原型設(shè)計(jì)朴则，抄什么权纤，怎么抄，怎么樣去呈現(xiàn)“骨”和“肉”乌妒？解決這個(gè)問題汹想，我們一方面要了解進(jìn)行原型設(shè)計(jì)需要規(guī)劃的兩個(gè)模塊，另一方面那看前輩給我們留下了的可以借鑒的“經(jīng)驗(yàn)”和“模板”撤蚊。

模塊一：信息架構(gòu)

信息架構(gòu)古掏，即信息的架構(gòu)。從語法的角度來說侦啸，信息是架構(gòu)的定語槽唾，架構(gòu)是中心詞。它是按照一定的方式光涂、方法用來組織信息庞萍，以使信息有某種或者多種結(jié)構(gòu)化的方式進(jìn)行展示，從而科學(xué)忘闻、有序和有效的達(dá)成信息傳達(dá)的目的钝计。從視覺直觀的角度說，我們?cè)诟鞣N產(chǎn)品中看到的頁(yè)面、視頻私恬、圖片债沮、圖標(biāo)、文案本鸣、按鈕疫衩、彈窗等等，都屬于信息的范疇永高。常見的信息架構(gòu)模式包括?層級(jí)式隧土、輻射式、套娃式命爬、標(biāo)簽視圖曹傀、便當(dāng)盒和篩選視圖；也有按照目的維度去畫分的饲宛，包括 分類系統(tǒng)皆愉、導(dǎo)航系統(tǒng)、標(biāo)簽系統(tǒng)艇抠、搜索系統(tǒng)幕庐、個(gè)性化推薦系統(tǒng)。兩種分類方式?jīng)]有本質(zhì)上的差別家淤，前面一種分類方式是PC站時(shí)代的定義异剥，后面一種主要是APP站時(shí)點(diǎn)的定義，而APP站作為PC站的繼承和發(fā)揚(yáng)絮重，在信息架構(gòu)上并不是一種“原生”的創(chuàng)新冤寿，兩種分類方法也就存在著一定的映射關(guān)系，比如青伤，從命名上就能看出的一致（標(biāo)簽視圖與標(biāo)簽系統(tǒng)督怜、搜索系統(tǒng)和篩選視圖）。既然存在多種的信息架構(gòu)模式狠角，如何選擇呢号杠？

這就要回歸到我們產(chǎn)品的定位、功能和核心元素和核心任務(wù)鏈上丰歌。產(chǎn)品定位是一個(gè)信息聚合平臺(tái)（如某頭條）的話姨蟋，功能主要是向用戶包括文字、圖片立帖、音頻眼溶、視頻等多媒體信息，對(duì)應(yīng)的核心元素就是這些多媒體信息厘惦，而核心任務(wù)鏈勢(shì)必就是圍繞用戶如何獲取、查看信息，輔以定向主動(dòng)獲取宵蕉、定向被動(dòng)推送酝静，以及信息獲取后的反饋機(jī)制等∠勐辏基于分析别智，我們就應(yīng)當(dāng)選用一種更便于信息組織的信息架構(gòu)模式來作為產(chǎn)品的主信息架構(gòu)，比如分類系統(tǒng)稼稿，而輔之導(dǎo)航系統(tǒng)薄榛、搜索系統(tǒng)和個(gè)性化推薦系統(tǒng)。

信息架構(gòu)示例（圖片來自網(wǎng)絡(luò)）

模塊二：交互設(shè)計(jì)

交互設(shè)計(jì)（Interaction Design, 縮寫IXD)让歼，完整的說應(yīng)該是“人機(jī)交互設(shè)計(jì)”敞恋，在學(xué)科上說應(yīng)該是在工業(yè)設(shè)計(jì)的范疇之內(nèi)，屬于子學(xué)科谋右。我們還是從語法的角度來說硬猫，交互是設(shè)計(jì)的定語，是設(shè)計(jì)的約束語改执。而交互是接觸和反饋的集合體啸蜜，交即接觸，互即互動(dòng)和反饋辈挂。所以交互設(shè)計(jì)就是對(duì)交互行為衬横、交互過程、交互方式终蒂、交互載體等進(jìn)行的可用蜂林、易用和通用的設(shè)計(jì)。通過對(duì)于交互的設(shè)計(jì)后豫，創(chuàng)造和建立的是人與人之外的悉尾，特別是計(jì)算機(jī)系統(tǒng)、工業(yè)設(shè)備等“非人”之間的相互交流挫酿、操作交互的方式构眯，實(shí)現(xiàn)“人機(jī)”的互動(dòng)。從視覺直觀的角度說早龟，我們?cè)诟鞣N產(chǎn)品中看到的界面惫霸、輸入框、選擇控件葱弟、確定或者取消按鈕壹店、彈窗、蒙版提示等芝加，包括SIRI的語音助手硅卢、華為的骨節(jié)敲擊、微信的搖一搖都是交互設(shè)計(jì)的范疇。常見的用于交互設(shè)計(jì)細(xì)分包括：交互界面（包括交互反饋）的設(shè)計(jì)将塑、交互控件的選擇和交互動(dòng)作（包括交互方式）的選擇脉顿。其中：

交互界面?是交互動(dòng)作和交互方式的載體，它與信息架構(gòu)有一定的關(guān)聯(lián)点寥，但側(cè)重點(diǎn)有不同艾疟，除了考慮保證交互信息（提示信息、按鈕等）完整性之外敢辩，還需要考慮界面布局的合理性蔽莱，如按鈕的位置，關(guān)聯(lián)信息的距離等戚长，關(guān)于交互架構(gòu)模式布局設(shè)計(jì)的基本理論主要有以下幾種：格式塔原理盗冷、網(wǎng)格系統(tǒng)、7±2法則历葛、席克定律正塌、費(fèi)茨定律、奧卡姆剃刀原理恤溶、復(fù)雜性守恒定律乓诽，網(wǎng)上有很多前輩都做了充分的介紹，大家可參考閱讀咒程。

交互界面（圖片來自網(wǎng)絡(luò)）

交互控件 如果大家留意的話鸠天，相比于交互界面的設(shè)計(jì)，對(duì)于交互控件和交互動(dòng)作的描述帐姻，我們使用了“選擇”稠集。之所以這樣處理是因?yàn)榻换タ丶诓煌南到y(tǒng)里，比如網(wǎng)頁(yè)饥瓷、IOS客戶端或者安卓客戶端都有了比較明確的定義剥纷，而且新增也往往是一個(gè)系統(tǒng)化定義的過程，新增更新的周期也會(huì)比較長(zhǎng)（涉及到大量用戶對(duì)新交互控件的普遍認(rèn)可和接受）呢铆。不同系統(tǒng)定義好的交互控件都是有公開資料可以查閱的晦鞋，而且我們的原型設(shè)計(jì)軟件也會(huì)將基本的交互控件作為基本元素，提供我們進(jìn)行“拖拽”使用棺克。常見的交互控件包括：彈窗（Alert_會(huì)話彈窗/Alert Dialog）悠垛、操作菜單（Action Sheets_控制菜單/Popover、Action views娜谊、Sheets_bottom确买、Dropdown menu等）、浮窗提示（Toast_提示/Snackbars）纱皆，這部分也有很詳實(shí)的公開資料可以查閱和學(xué)習(xí)湾趾。

交互控件（圖片來自網(wǎng)絡(luò)）

交互動(dòng)作 簡(jiǎn)單來說是人芭商，特別是?人手?在交互界面對(duì)交互控件進(jìn)行操作的動(dòng)作。 在APP站常見的交易動(dòng)作包括搀缠，點(diǎn)擊蓉坎、長(zhǎng)按、劃動(dòng)（上下胡嘿、左右）、拖拽钳踊、拖拉（多觸點(diǎn)衷敌、多手指）等。這些基本的交互動(dòng)作是符合了使用者的認(rèn)知和直接的條件反射的拓瞪，也是滿足我們基本的產(chǎn)品功能的操作需求的缴罗。我們?nèi)粘ｓw驗(yàn)中，幼兒祭埂，特別是很多嬰兒可以很自如的操作我們的手機(jī)的一些功能就很好的說明了這個(gè)現(xiàn)象面氓。

交互動(dòng)作（圖片來自網(wǎng)絡(luò)）

如前述，交互界面蛆橡、交互控件的選擇和交互動(dòng)作選擇所服務(wù)的是產(chǎn)品的核心任務(wù)鏈舌界，通過必要信息、控件的組織泰演，配合信息架構(gòu)引導(dǎo)用戶完成核心任務(wù)鏈呻拌，即業(yè)務(wù)流程的操作，最終完成其使用產(chǎn)品的目的睦焕。

樣例

我們還是用前文提到的醫(yī)療平臺(tái)作為樣例藐握，來制作一個(gè)簡(jiǎn)單的線框結(jié)構(gòu)的原型（再次感謝提供案例的同學(xué)）。在上兩篇里分析的基礎(chǔ)上垃喊，作為案例的“移動(dòng)在線醫(yī)療訓(xùn)練平臺(tái)”定位是一個(gè)提供給備考考生猾普，或者相關(guān)從業(yè)者進(jìn)行“臨床類別實(shí)踐技能”訓(xùn)練的平臺(tái)產(chǎn)品，也提取了它的核心元素（訓(xùn)練內(nèi)容本谜、相關(guān)指導(dǎo)信息初家、后評(píng)價(jià)信息）和核心任務(wù)鏈【發(fā)現(xiàn)（訓(xùn)練）——選擇（訓(xùn)練）——進(jìn)行（訓(xùn)練）——（訓(xùn)練）評(píng)價(jià)——發(fā)現(xiàn)（訓(xùn)練）】。此外耕突，醫(yī)療平臺(tái)作為一個(gè)獨(dú)立的用戶產(chǎn)品笤成，要需要加入一些標(biāo)準(zhǔn)的公共產(chǎn)品模塊（如用戶管理：注冊(cè)、登錄眷茁、個(gè)人信息等）來構(gòu)建炕泳。

原型樣例

以上原型設(shè)計(jì)僅作為樣例展示，實(shí)際的產(chǎn)品原型還是需要根據(jù)具體的需求進(jìn)行設(shè)計(jì)上祈，包括全業(yè)務(wù)流程的引導(dǎo)和控制培遵，同時(shí)也依賴產(chǎn)品在同業(yè)產(chǎn)品中的行業(yè)定位浙芙、產(chǎn)品策略和競(jìng)爭(zhēng)策略的不同而有所差別。?

結(jié)語

產(chǎn)品設(shè)計(jì)的目標(biāo)：為用戶帶來價(jià)值籽腕、為用戶提供舒適的使用體驗(yàn)嗡呼、為用戶提供情感的安慰、為用戶提供驚喜皇耗。

本篇是這個(gè)系列的文章的最后一篇南窗，感謝閱讀和支持，產(chǎn)品路上郎楼，讓我們一起努力万伤。