淺談移動端原型頁面的設(shè)計策略

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

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

　　也許在設(shè)計過程中，你會遇到以下問題：

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

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

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

　　被吐槽原型畫的丑，視覺體驗差。

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

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

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

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

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

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

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

　　第一階段：發(fā)散

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

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

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

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

　　1. 解體

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

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

　　那么如何解體呢?

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

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

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

　　②拆分模塊，按鈕分類

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

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

　　2. 整理

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

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

　　也許你會問，這一步的作用是什么?

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

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

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

　　最少必要：

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

　　考慮添加：

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

　　不考慮添加：

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

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

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

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

　　第二階段：重組

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

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

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

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

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

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

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

　　①元素劃分

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

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

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

　?、谛畔⑴c功能的布局

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

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

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

　　③模塊布局

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

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

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

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

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

　　2. 填充

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

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

　　主次分明

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

　　相近原則

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

　　風(fēng)格中性

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

　　控制篇幅

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

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

　　3. 優(yōu)化

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

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

　　間隔

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

　　色彩

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

　　圖標(biāo)

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

　　邊框

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

　　文字

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

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

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

　　三、結(jié)語

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

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