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

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

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

　　在設計從沒畫過的頁面時，不確定頁面中應該有哪些元素，該如何建立頁面結構;

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

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

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

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

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

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

　　設計前先進行思維的發(fā)散，試著去分析頁面的基本結構，并形成素材組。

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

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

　　下面我們以商品詳情頁為例，來看如何進行復雜頁面的高保真原型設計。

　　第一階段：發(fā)散

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

　　頁面的設計與寫作相同，都需要在具體設計前先進行構思。先思考頁面的基本結構，然后在頭腦風暴的過程中思考其合理性并收集整理相應的素材。

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

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

　　1. 解體

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

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

　　那么如何解體呢?

　?、傧日业揭粡埬繕隧撁?/p>

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

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

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

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

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

　　2. 整理

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

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

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

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

　　那么如何進行素材的分類呢?

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

　　最少必要：

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

　　考慮添加：

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

　　不考慮添加：

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

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

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

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

　　第二階段：重組

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

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

　　依舊以商詳頁為例，我們來看如何從頁面結構的搭建，一步步轉化為實際頁面。

　　1. 結構搭建

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

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

　　結構搭建一共分為三步：

　?、僭貏澐?/p>

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

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

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

　?、谛畔⑴c功能的布局

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

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

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

　?、勰K布局

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

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

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

　　一個好的頁面結構能幫助降低用戶閱讀難度，提高閱讀效率。

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

　　2. 填充

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

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

　　主次分明

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

　　相近原則

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

　　風格中性

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

　　控制篇幅

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

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

　　3. 優(yōu)化

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

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

　　間隔

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

　　色彩

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

　　圖標

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

　　邊框

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

　　文字

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

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

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

　　三、結語

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

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