淺談移動(dòng)端原型頁(yè)面的設(shè)計(jì)策略

　　本文為我在電商移動(dòng)端頁(yè)面設(shè)計(jì)的過(guò)程中，總結(jié)的一套設(shè)計(jì)策略，希望能對(duì)你有所幫助。

　　畫原型是產(chǎn)品經(jīng)理的必備技能，而移動(dòng)端PM更是少不了要畫APP原型頁(yè)面，這其中的設(shè)計(jì)是一件看似簡(jiǎn)單但其實(shí)復(fù)雜的事情。

　　也許在設(shè)計(jì)過(guò)程中，你會(huì)遇到以下問(wèn)題：

　　在設(shè)計(jì)從沒(méi)畫過(guò)的頁(yè)面時(shí)，不確定頁(yè)面中應(yīng)該有哪些元素，該如何建立頁(yè)面結(jié)構(gòu);

　　擔(dān)心對(duì)頁(yè)面的設(shè)計(jì)考慮不全，一旦有了新的業(yè)務(wù)拓展，原有的設(shè)計(jì)就得作廢，再次大改;

　　頁(yè)面信息量龐大且復(fù)雜，設(shè)計(jì)壓力大，不知道如何設(shè)計(jì)的自然有序;

　　被吐槽原型畫的丑，視覺(jué)體驗(yàn)差。

　　這些問(wèn)題其實(shí)都很常見(jiàn)，為了避免反復(fù)陷入以上問(wèn)題而變得工作低效，我們應(yīng)該試著去思考和總結(jié)，并沉淀出一套適合自己的高效設(shè)計(jì)方法論，幫助我們化繁為簡(jiǎn)并高效地輸出頁(yè)面設(shè)計(jì)，做到快速的繪畫原型，并設(shè)計(jì)的自然有序和簡(jiǎn)潔美觀。

　　在對(duì)商城許多頁(yè)面的設(shè)計(jì)過(guò)程中，我反復(fù)思考并提煉了移動(dòng)端高保真頁(yè)面較為完整的設(shè)計(jì)思路，共分為兩個(gè)階段五個(gè)步驟：

　　發(fā)散：解體→整理

　　設(shè)計(jì)前先進(jìn)行思維的發(fā)散，試著去分析頁(yè)面的基本結(jié)構(gòu)，并形成素材組。

　　重組：結(jié)構(gòu)搭建→填充→優(yōu)化

　　設(shè)計(jì)時(shí)應(yīng)循序漸進(jìn)，先進(jìn)行頁(yè)面整體結(jié)構(gòu)的搭建，再到模塊填充，最后細(xì)節(jié)優(yōu)化，逐步深入。

　　下面我們以商品詳情頁(yè)為例，來(lái)看如何進(jìn)行復(fù)雜頁(yè)面的高保真原型設(shè)計(jì)。

　　第一階段：發(fā)散

　　我們知道，寫作的一般步驟是先定寫作主題，然后定大綱，在大綱構(gòu)思的過(guò)程中確定了要闡述的觀點(diǎn)和支撐觀點(diǎn)的素材，最后再進(jìn)行內(nèi)容的寫作。

　　頁(yè)面的設(shè)計(jì)與寫作相同，都需要在具體設(shè)計(jì)前先進(jìn)行構(gòu)思。先思考頁(yè)面的基本結(jié)構(gòu)，然后在頭腦風(fēng)暴的過(guò)程中思考其合理性并收集整理相應(yīng)的素材。

　　這個(gè)先構(gòu)思樹(shù)干然后通過(guò)其向四周進(jìn)行思維發(fā)散的過(guò)程，我稱之為發(fā)散，強(qiáng)調(diào)思維的發(fā)散。

　　再具體一點(diǎn)，這個(gè)構(gòu)思流程可以具現(xiàn)化為兩個(gè)步驟：解體和整理。

　　1. 解體

　　解體，即梳理頁(yè)面的結(jié)構(gòu)。當(dāng)你準(zhǔn)備開(kāi)始畫從未設(shè)計(jì)過(guò)的頁(yè)面時(shí)，先找到一張相同作用的頁(yè)面，去分析頁(yè)面的結(jié)構(gòu)，即頁(yè)面內(nèi)的模塊和布局。

　　這是快速設(shè)計(jì)的第一步，為的是在具體設(shè)計(jì)前先形成對(duì)該頁(yè)面的整體性認(rèn)知，幫助你在設(shè)計(jì)時(shí)建立頁(yè)面的主心骨。如果不先進(jìn)行頁(yè)面解體，很容易使得后面的設(shè)計(jì)過(guò)程中頁(yè)面結(jié)構(gòu)不清晰，模塊內(nèi)外部聯(lián)系混亂。

　　那么如何解體呢?

　?、傧日业揭粡埬繕?biāo)頁(yè)面

　　以下圖的商詳頁(yè)為例，如果跟我一樣是自有頁(yè)面優(yōu)化，那就用原頁(yè)面來(lái)解體，如果是新頁(yè)面，就找到相同作用的競(jìng)品頁(yè)，又或者沒(méi)有原頁(yè)面也沒(méi)找到競(jìng)品頁(yè)，那就跳過(guò)這一步，按照自己對(duì)該頁(yè)面的理解，進(jìn)行解體的下一個(gè)的步驟。

　　可以看到，這張商詳頁(yè)由商品的基本信息、活動(dòng)信息、服務(wù)說(shuō)明、商品參數(shù)、商品詳情，以及各類按鈕等組成，相比天貓和京東的商詳頁(yè)，復(fù)雜度并不是很高，但其不合理的商品信息堆積呈現(xiàn)，造成了較差的視覺(jué)體驗(yàn)，頁(yè)面不協(xié)調(diào)且信息層級(jí)混亂。

　?、诓鸱帜K，按鈕分類

　　如上圖，對(duì)目標(biāo)頁(yè)面分解，可以按照該頁(yè)面是由哪些內(nèi)容組成，以此來(lái)拆分成各個(gè)獨(dú)立子模塊。同時(shí)將按鈕分為主線和支線按鈕，其區(qū)別在于是否是主線業(yè)務(wù)流程上的路徑按鈕。

　　需要明白，分解是我們處理復(fù)雜事物的自然方式，這種像剝洋蔥一樣的工作方法，有利于我們認(rèn)識(shí)和理解事物。

　　2. 整理

　　整理，即收集并分類素材，形成素材組。在頁(yè)面解體時(shí)我們可以羅列出其中的元素，但僅從單頁(yè)面分析往往是不夠的，還需要橫向?qū)Ρ雀?jìng)品頁(yè)面，研究并根據(jù)需要，拆解頁(yè)面的部分元素進(jìn)行收集，同時(shí)篩選分類，最后形成素材組。

　　如果不去先了解競(jìng)品，很容易思維局限在一個(gè)小范圍，不了解該頁(yè)面的普遍做法和主流產(chǎn)品所培養(yǎng)起來(lái)的用戶習(xí)慣，在對(duì)后期業(yè)務(wù)拓展的支撐上也容易思考不足。正所謂知己知彼，才能百戰(zhàn)百勝。

　　也許你會(huì)問(wèn)，這一步的作用是什么?

　　這一步，就像在看一本書時(shí)，先大概翻翻，粗讀一下，對(duì)書有一個(gè)大致的輪廓后，就可以預(yù)估閱讀難度，在閱讀過(guò)程中做到有的放矢。同樣的，除了了解普遍做法，幫助拓散思維外，設(shè)計(jì)前的素材收集整理，還能避免我們?cè)谠O(shè)計(jì)過(guò)程中對(duì)元素遺漏的憂慮。

　　那么如何進(jìn)行素材的分類呢?

　　繼續(xù)以商詳頁(yè)為例，在了解該頁(yè)面的普遍做法后，簡(jiǎn)要分析頁(yè)面元素，并通過(guò)提煉和分類，分為最少必要、考慮添加、不考慮添加三個(gè)素材組。

　　最少必要：

　　在研究頁(yè)面時(shí)我們應(yīng)先分析該頁(yè)面的最基本構(gòu)成是什么，將核心元素提煉出來(lái)后進(jìn)行收集，這些元素便足以構(gòu)成最小可行頁(yè)面。比如，商詳頁(yè)的「最少必要」構(gòu)成為：商品基本信息+商品詳細(xì)介紹+規(guī)格選擇+運(yùn)費(fèi)說(shuō)明+營(yíng)銷活動(dòng)說(shuō)明+購(gòu)買按鈕。

　　考慮添加：

　　這部分元素在添加后可增強(qiáng)用戶體驗(yàn)或者輔助實(shí)現(xiàn)業(yè)務(wù)需求，且實(shí)現(xiàn)難度在本次迭代周期可接受的范圍內(nèi)。比如，在位于商詳頁(yè)主圖下方的價(jià)格模塊中，我們可以看到除了顯示優(yōu)惠前后的價(jià)格外，還有些做法會(huì)在該模塊中加入優(yōu)惠倒計(jì)時(shí)圖標(biāo)、已售件數(shù)、優(yōu)惠折扣計(jì)算、包郵包稅圖標(biāo)等，這些元素都能幫助你思考本次設(shè)計(jì)對(duì)后期業(yè)務(wù)的支撐，當(dāng)然最后是否加入還是要綜合考慮自身業(yè)務(wù)發(fā)展的需要。

　　不考慮添加：

　　即與業(yè)務(wù)目標(biāo)不相符，或不列入本次優(yōu)化需求范圍的元素。比如，我在梳理原有頁(yè)面問(wèn)題的過(guò)程中，就明確了此次改版的主要方向?yàn)? 優(yōu)化用戶體驗(yàn)，提高信息輸出效率，那么在發(fā)散收集的時(shí)候，便可以明確不會(huì)添加哪些模塊，無(wú)需收集，比如 不做問(wèn)答、不做用戶評(píng)價(jià)、不做進(jìn)店逛，只需簡(jiǎn)單記錄即可。

　　需要注意的是，在整理過(guò)程中我們要盡可能將想法寫出來(lái)，不要局限于在腦海里“干”想，而應(yīng)該邊思考邊動(dòng)手，可以在分類時(shí)對(duì)元素進(jìn)行編號(hào)，加標(biāo)簽等，進(jìn)行想法記錄。

　　收集有采用價(jià)值的素材，以及思考前后關(guān)聯(lián)性，素材收集的越多，越有助于發(fā)散和補(bǔ)充。

　　通過(guò)這一步你已經(jīng)形成了自己的素材組，接下來(lái)的重組階段就是考驗(yàn)?zāi)阍O(shè)計(jì)能力的時(shí)候了。

　　第二階段：重組

　　在發(fā)散階段我們對(duì)該頁(yè)面的基本組成有了初步的理解，并整理好了素材，接下來(lái)就進(jìn)入第二階段——重組。

　　顧名思義，重組就是將零件重新組裝起來(lái)，共分為3個(gè)步驟：結(jié)構(gòu)搭建、填充、優(yōu)化。

　　依舊以商詳頁(yè)為例，我們來(lái)看如何從頁(yè)面結(jié)構(gòu)的搭建，一步步轉(zhuǎn)化為實(shí)際頁(yè)面。

　　1. 結(jié)構(gòu)搭建

　　結(jié)構(gòu)搭建，即對(duì)頁(yè)面的模塊進(jìn)行結(jié)構(gòu)性布局。通過(guò)分析頁(yè)面的模塊組成，以及模塊之間的關(guān)系，思考頁(yè)面的最優(yōu)布局，使得頁(yè)面變得易讀和具有拓展性。

　　一個(gè)好的頁(yè)面結(jié)構(gòu)，能使得頁(yè)面板塊連貫自然，并帶來(lái)舒服的視覺(jué)效果。思考如何構(gòu)建平衡的結(jié)構(gòu)，建立合理的頁(yè)面信息流，能幫助我們向用戶傳達(dá)清晰有效的信息。

　　結(jié)構(gòu)搭建一共分為三步：

　?、僭貏澐?/p>

　　我們對(duì)在 「發(fā)散 」階段整理的元素按照 信息 和 操作 這兩種屬性，劃分為 信息相關(guān) 和 功能相關(guān) 兩個(gè)大類，區(qū)別在于僅供閱讀和可操作，再基于這兩個(gè)大類按照重要程度分別劃分為：主要信息、輔助信息、主要功能、輔助功能。

　　如下圖，以商詳頁(yè)為例進(jìn)行說(shuō)明，我們對(duì)頁(yè)面內(nèi)用戶會(huì)主動(dòng)瀏覽的信息，歸為主要信息，如商品標(biāo)題、價(jià)格、促銷說(shuō)明等;對(duì)除非需要否則用戶一般不關(guān)心的信息歸于輔助信息，如商品參數(shù)說(shuō)明。

　　主要功能和輔助功能的區(qū)別，則在于是否是頁(yè)面內(nèi)主線流程的操作功能，比如立即購(gòu)買是主線流程的功能，而收藏操作則屬于支線流程的需求。

　?、谛畔⑴c功能的布局

　　對(duì)頁(yè)面元素劃分為四類內(nèi)容后，我們需要在頁(yè)面進(jìn)行基本布局，從大類信息到小類信息進(jìn)行分級(jí)布局，減少排版壓力。

　　如下圖，根據(jù)頁(yè)面習(xí)慣我將主要功能放到右下角，輔助功能左下角和頁(yè)面右側(cè)，并將輔助信息放置在中下方，做簡(jiǎn)短的概要說(shuō)明。

　　建議平常多觀察移動(dòng)端頁(yè)面常用的布局，如列表式布局，宮格布局、圖表式布局等，分析其使用場(chǎng)景和優(yōu)缺點(diǎn)，才能在實(shí)戰(zhàn)時(shí)做到靈活應(yīng)用，進(jìn)行布局設(shè)計(jì)。

　?、勰K布局

　　結(jié)合場(chǎng)景，從用戶的角度整理信息，思考用戶最關(guān)心的內(nèi)容，再根據(jù)上一步的基本布局，確定模塊的合理排序展現(xiàn)給用戶。

　　模塊布局的重點(diǎn)在于思考要表達(dá)的信息流，對(duì)信息層級(jí)的劃分排序，使得板塊連貫自然，所以還不用對(duì)功能按鈕進(jìn)行仔細(xì)劃分。

　　商詳頁(yè)的信息流確立，可以根據(jù)用戶對(duì)商品信息的關(guān)注程度和邏輯遞進(jìn)來(lái)判斷，進(jìn)入頁(yè)面先了解商品基本信息，再往下看到是否有優(yōu)惠折扣，刺激用戶繼續(xù)瀏覽的欲望，接著看規(guī)格服務(wù)是否有多種款式和基本的保障，最后用更多的時(shí)間去看參數(shù)和介紹以便更了解商品，從而做出購(gòu)買決策。

　　一個(gè)好的頁(yè)面結(jié)構(gòu)能幫助降低用戶閱讀難度，提高閱讀效率。

　　在搭建頁(yè)面結(jié)構(gòu)時(shí)，我們應(yīng)從大框架到小框架，逐個(gè)擊破，這種分層演化的思維能幫助我們降低創(chuàng)作負(fù)荷，并專注當(dāng)下任務(wù)。

　　2. 填充

　　我們通過(guò)上一步完成了頁(yè)面結(jié)構(gòu)的搭建，接下來(lái)便可以進(jìn)行內(nèi)容的填充了，即將元素依次填充進(jìn)相應(yīng)的模塊，這一步也是低保真原型的最后工作。

　　在產(chǎn)品設(shè)計(jì)初期，為了能夠快速討論和調(diào)整，我們通常會(huì)采用低保真原型的方式來(lái)展示方案，為了保證方案的準(zhǔn)確表達(dá)，在進(jìn)行模塊填充和頁(yè)面調(diào)整時(shí)，還需遵循以下幾個(gè)小點(diǎn)：

　　主次分明

　　要了解用戶會(huì)對(duì)哪些信息粗讀，哪些細(xì)讀，做到重點(diǎn)突出。

　　相近原則

　　模塊內(nèi)相同特征的元素鄰近放在一起，能讓人感知其相似性，便于快速閱讀頁(yè)面。

　　風(fēng)格中性

　　即去個(gè)性化，低保真原型純粹用于方案討論，需做到平衡簡(jiǎn)潔與核心信息，頁(yè)面色調(diào)一般采用黑白灰即可。

　　控制篇幅

　　每個(gè)頁(yè)面都如同一篇文章，內(nèi)容過(guò)多時(shí)則閱讀邊際效益遞減，故需要考慮對(duì)長(zhǎng)內(nèi)容進(jìn)行折疊或彈窗處理。

　　低保真原型雖然還不能直接用于開(kāi)發(fā)評(píng)審，但可用于繪畫頁(yè)面流程圖，方便自己對(duì)流程的檢查和方案的整體描述。

　　3. 優(yōu)化

　　優(yōu)化，即梳理產(chǎn)品細(xì)節(jié)，提高原型的保真程度。高保真原型除了要求頁(yè)面結(jié)構(gòu)清晰，還需做到在頁(yè)面設(shè)計(jì)上對(duì)信息最大化降噪，簡(jiǎn)單易懂，才能讓用戶閱讀舒適，輕松達(dá)到目的而又不會(huì)干擾和困擾他們的選擇。

　　這其中，需要考慮處理的元素細(xì)節(jié)有：

　　間隔

　　間隔方式有留白和分割線兩種。留白能用來(lái)幫助聚焦最重要的信息，適當(dāng)?shù)牧舭卓梢宰屇愕慕缑娓徐`性，給信息之間預(yù)留更多的空間，也能更好的表達(dá)信息之間的層次感，相比擁擠的信息布局更能給人舒適的體驗(yàn)。分割線同樣也能起到美觀方便閱讀的作用，并讓界限更加分明。

　　色彩

　　要注意到頁(yè)面色彩會(huì)對(duì)視覺(jué)邏輯順序的影響，人們總是會(huì)先注意到明亮的顏色，可在具體內(nèi)容中使用不同色系以向UI設(shè)計(jì)師表達(dá)你想要呈現(xiàn)的視覺(jué)順序。

　　圖標(biāo)

　　圖標(biāo)按鈕要能夠簡(jiǎn)單明了，讓用戶一看就能知道是什么意思。最常用的圖標(biāo)可分為線性圖標(biāo)和面性圖標(biāo)兩種，兩種圖標(biāo)樣式之間存在著不同的識(shí)別效率，需要了解兩者的使用場(chǎng)景。同時(shí)，圖標(biāo)按鈕要足夠大，以便用戶可以輕松點(diǎn)擊他們。

　　邊框

　　對(duì)需要顯示邊框的元素，其邊框顏色可以采用半透明或淺色系，以增強(qiáng)可讀性。

　　文字

　　頁(yè)面內(nèi)的文字要注意細(xì)體和粗體的表達(dá)，并對(duì)文字類的提示描述進(jìn)行克制精簡(jiǎn)。

　　高保真原型已經(jīng)極度接近最終產(chǎn)品形態(tài)，在視覺(jué)和內(nèi)容上都無(wú)限接近最終上線效果，結(jié)合交互和需求說(shuō)明，便可進(jìn)行設(shè)計(jì)的可能性驗(yàn)證了。

　　要注意的是，設(shè)計(jì)時(shí)要注重頁(yè)面的簡(jiǎn)潔性，以及背后交流的純粹性，讓用戶更清晰的感知產(chǎn)品功能及業(yè)務(wù)。

　　三、結(jié)語(yǔ)

　　原型頁(yè)面設(shè)計(jì)是一個(gè)從大到小逐層演化的過(guò)程，從了解并明確頁(yè)面信息點(diǎn)，再到頁(yè)面結(jié)構(gòu)搭建，繪畫成低保真原型，最后進(jìn)行細(xì)節(jié)優(yōu)化。

　　值得注意的是，低保真原型注重完整業(yè)務(wù)流程的表達(dá)，而高保真則是對(duì)視覺(jué)效果的優(yōu)化，且繪畫高保真原型圖的時(shí)間較長(zhǎng)，回爐成本較高，我們應(yīng)先以最低成本畫出一個(gè)“簡(jiǎn)陋”的低保真，實(shí)驗(yàn)自己的想法或通過(guò)初步評(píng)審后，時(shí)間充足且團(tuán)隊(duì)需要時(shí)再繼續(xù)畫高保真原型。