起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識淺談移動端原型頁面的設計策略
當你準備開始進行一個較為復雜的APP原型頁面設計時，你會如何下手？本文為我在電商移動端頁面設計的過程中，總結的一套設計策略，希望能對你有所幫助。
畫原型是產品經理的必備技能，而移動端PM更是少不了要畫APP原型頁面，這其中的設計是一件看似簡單但其實復雜的事情。
也許在設計過程中，你會遇到以下問題：
- 在設計從沒畫過的頁面時，不確定頁面中應該有哪些元素，該如何建立頁面結構；
- 擔心對頁面的設計考慮不全，一旦有了新的業務拓展，原有的設計就得作廢，再次大改；
- 頁面信息量龐大且復雜，設計壓力大，不知道如何設計的自然有序；
- 被吐槽原型畫的丑，視覺體驗差。
這些問題其實都很常見，為了避免反復陷入以上問題而變得工作低效，我們應該試著去思考和總結，并沉淀出一套適合自己的高效設計方法論，幫助我們化繁為簡并高效地輸出頁面設計，做到快速的繪畫原型，并設計的自然有序和簡潔美觀。
在對商城許多頁面的設計過程中，我反復思考并提煉了移動端高保真頁面較為完整的設計思路，共分為兩個階段五個步驟：
發散：解體→整理
設計前先進行思維的發散，試著去分析頁面的基本結構，并形成素材組。
重組：結構搭建→填充→優化
設計時應循序漸進，先進行頁面整體結構的搭建，再到模塊填充，最后細節優化，逐步深入。
下面我們以商品詳情頁為例，來看如何進行復雜頁面的高保真原型設計。
第一階段：發散
我們知道，寫作的一般步驟是先定寫作主題，然后定大綱，在大綱構思的過程中確定了要闡述的觀點和支撐觀點的素材，最后再進行內容的寫作。
頁面的設計與寫作相同，都需要在具體設計前先進行構思。先思考頁面的基本結構，然后在頭腦風暴的過程中思考其合理性并收集整理相應的素材。
這個先構思樹干然后通過其向四周進行思維發散的過程，我稱之為發散，強調思維的發散。
再具體一點，這個構思流程可以具現化為兩個步驟：解體和整理。
1. 解體
解體，即梳理頁面的結構。當你準備開始畫從未設計過的頁面時，先找到一張相同作用的頁面，去分析頁面的結構，即頁面內的模塊和布局。
這是快速設計的第一步，為的是在具體設計前先形成對該頁面的整體性認知，幫助你在設計時建立頁面的主心骨。如果不先進行頁面解體，很容易使得后面的設計過程中頁面結構不清晰，模塊內外部聯系混亂。
那么如何解體呢？
①先找到一張目標頁面
以下圖的商詳頁為例，如果跟我一樣是自有頁面優化，那就用原頁面來解體，如果是新頁面，就找到相同作用的競品頁，又或者沒有原頁面也沒找到競品頁，那就跳過這一步，按照自己對該頁面的理解，進行解體的下一個的步驟。
可以看到，這張商詳頁由商品的基本信息、活動信息、服務說明、商品參數、商品詳情，以及各類按鈕等組成，相比天貓和京東的商詳頁，復雜度并不是很高，但其不合理的商品信息堆積呈現，造成了較差的視覺體驗，頁面不協調且信息層級混亂。
②拆分模塊，按鈕分類
如上圖，對目標頁面分解，可以按照該頁面是由哪些內容組成，以此來拆分成各個獨立子模塊。同時將按鈕分為主線和支線按鈕，其區別在于是否是主線業務流程上的路徑按鈕。
需要明白，分解是我們處理復雜事物的自然方式，這種像剝洋蔥一樣的工作方法，有利于我們認識和理解事物。
2. 整理
整理，即收集并分類素材，形成素材組。在頁面解體時我們可以羅列出其中的元素，但僅從單頁面分析往往是不夠的，還需要橫向對比競品頁面，研究并根據需要，拆解頁面的部分元素進行收集，同時篩選分類，最后形成素材組。
如果不去先了解競品，很容易思維局限在一個小范圍，不了解該頁面的普遍做法和主流產品所培養起來的用戶習慣，在對后期業務拓展的支撐上也容易思考不足。正所謂知己知彼，才能百戰百勝。
也許你會問，這一步的作用是什么？
這一步，就像在看一本書時，先大概翻翻，粗讀一下，對書有一個大致的輪廓后，就可以預估閱讀難度，在閱讀過程中做到有的放矢。同樣的，除了了解普遍做法，幫助拓散思維外，設計前的素材收集整理，還能避免我們在設計過程中對元素遺漏的憂慮。
那么如何進行素材的分類呢？
繼續以商詳頁為例，在了解該頁面的普遍做法后，簡要分析頁面元素，并通過提煉和分類，分為最少必要、考慮添加、不考慮添加三個素材組。
最少必要：
在研究頁面時我們應先分析該頁面的最基本構成是什么，將核心元素提煉出來后進行收集，這些元素便足以構成最小可行頁面。比如，商詳頁的「最少必要」構成為：商品基本信息+商品詳細介紹+規格選擇+運費說明+營銷活動說明+購買按鈕。
考慮添加：
這部分元素在添加后可增強用戶體驗或者輔助實現業務需求，且實現難度在本次迭代周期可接受的范圍內。比如，在位于商詳頁主圖下方的價格模塊中，我們可以看到除了顯示優惠前后的價格外，還有些做法會在該模塊中加入優惠倒計時圖標、已售件數、優惠折扣計算、包郵包稅圖標等，這些元素都能幫助你思考本次設計對后期業務的支撐，當然最后是否加入還是要綜合考慮自身業務發展的需要。
不考慮添加：
即與業務目標不相符，或不列入本次優化需求范圍的元素。比如，我在梳理原有頁面問題的過程中，就明確了此次改版的主要方向為 優化用戶體驗，提高信息輸出效率，那么在發散收集的時候，便可以明確不會添加哪些模塊，無需收集，比如 不做問答、不做用戶評價、不做進店逛，只需簡單記錄即可。
需要注意的是，在整理過程中我們要盡可能將想法寫出來，不要局限于在腦海里“干”想，而應該邊思考邊動手，可以在分類時對元素進行編號，加標簽等，進行想法記錄。
收集有采用價值的素材，以及思考前后關聯性，素材收集的越多，越有助于發散和補充。
通過這一步你已經形成了自己的素材組，接下來的重組階段就是考驗你設計能力的時候了。
第二階段：重組
在發散階段我們對該頁面的基本組成有了初步的理解，并整理好了素材，接下來就進入第二階段——重組。
顧名思義，重組就是將零件重新組裝起來，共分為3個步驟：結構搭建、填充、優化。
依舊以商詳頁為例，我們來看如何從頁面結構的搭建，一步步轉化為實際頁面。
1. 結構搭建
結構搭建，即對頁面的模塊進行結構性布局。通過分析頁面的模塊組成，以及模塊之間的關系，思考頁面的最優布局，使得頁面變得易讀和具有拓展性。
一個好的頁面結構，能使得頁面板塊連貫自然，并帶來舒服的視覺效果。思考如何構建平衡的結構，建立合理的頁面信息流，能幫助我們向用戶傳達清晰有效的信息。
結構搭建一共分為三步：
①元素劃分
我們對在 「發散 」階段整理的元素按照 信息 和 操作 這兩種屬性，劃分為 信息相關 和 功能相關 兩個大類，區別在于僅供閱讀和可操作，再基于這兩個大類按照重要程度分別劃分為：主要信息、輔助信息、主要功能、輔助功能。
如下圖，以商詳頁為例進行說明，我們對頁面內用戶會主動瀏覽的信息，歸為主要信息，如商品標題、價格、促銷說明等；對除非需要否則用戶一般不關心的信息歸于輔助信息，如商品參數說明。
主要功能和輔助功能的區別，則在于是否是頁面內主線流程的操作功能，比如立即購買是主線流程的功能，而收藏操作則屬于支線流程的需求。
②信息與功能的布局
對頁面元素劃分為四類內容后，我們需要在頁面進行基本布局，從大類信息到小類信息進行分級布局，減少排版壓力。
如下圖，根據頁面習慣我將主要功能放到右下角，輔助功能左下角和頁面右側，并將輔助信息放置在中下方，做簡短的概要說明。
建議平常多觀察移動端頁面常用的布局，如列表式布局，宮格布局、圖表式布局等，分析其使用場景和優缺點，才能在實戰時做到靈活應用，進行布局設計。
③模塊布局
結合場景，從用戶的角度整理信息，思考用戶最關心的內容，再根據上一步的基本布局，確定模塊的合理排序展現給用戶。
模塊布局的重點在于思考要表達的信息流，對信息層級的劃分排序，使得板塊連貫自然，所以還不用對功能按鈕進行仔細劃分。
商詳頁的信息流確立，可以根據用戶對商品信息的關注程度和邏輯遞進來判斷，進入頁面先了解商品基本信息，再往下看到是否有優惠折扣，刺激用戶繼續瀏覽的欲望，接著看規格服務是否有多種款式和基本的保障，最后用更多的時間去看參數和介紹以便更了解商品，從而做出購買決策。
一個好的頁面結構能幫助降低用戶閱讀難度，提高閱讀效率。
在搭建頁面結構時，我們應從大框架到小框架，逐個擊破，這種分層演化的思維能幫助我們降低創作負荷，并專注當下任務。
2. 填充
我們通過上一步完成了頁面結構的搭建，接下來便可以進行內容的填充了，即將元素依次填充進相應的模塊，這一步也是低保真原型的最后工作。
在產品設計初期，為了能夠快速討論和調整，我們通常會采用低保真原型的方式來展示方案，為了保證方案的準確表達，在進行模塊填充和頁面調整時，還需遵循以下幾個小點：
主次分明
要了解用戶會對哪些信息粗讀，哪些細讀，做到重點突出。
相近原則
模塊內相同特征的元素鄰近放在一起，能讓人感知其相似性，便于快速閱讀頁面。
風格中性
即去個性化，低保真原型純粹用于方案討論，需做到平衡簡潔與核心信息，頁面色調一般采用黑白灰即可。
控制篇幅
每個頁面都如同一篇文章，內容過多時則閱讀邊際效益遞減，故需要考慮對長內容進行折疊或彈窗處理。
低保真原型雖然還不能直接用于開發評審，但可用于繪畫頁面流程圖，方便自己對流程的檢查和方案的整體描述。
3. 優化
優化，即梳理產品細節，提高原型的保真程度。高保真原型除了要求頁面結構清晰，還需做到在頁面設計上對信息最大化降噪，簡單易懂，才能讓用戶閱讀舒適，輕松達到目的而又不會干擾和困擾他們的選擇。
這其中，需要考慮處理的元素細節有：
間隔
間隔方式有留白和分割線兩種。留白能用來幫助聚焦最重要的信息，適當的留白可以讓你的界面更有靈性，給信息之間預留更多的空間，也能更好的表達信息之間的層次感，相比擁擠的信息布局更能給人舒適的體驗。分割線同樣也能起到美觀方便閱讀的作用，并讓界限更加分明。
色彩
要注意到頁面色彩會對視覺邏輯順序的影響，人們總是會先注意到明亮的顏色，可在具體內容中使用不同色系以向UI設計師表達你想要呈現的視覺順序。
圖標
圖標按鈕要能夠簡單明了，讓用戶一看就能知道是什么意思。最常用的圖標可分為線性圖標和面性圖標兩種，兩種圖標樣式之間存在著不同的識別效率，需要了解兩者的使用場景。同時，圖標按鈕要足夠大，以便用戶可以輕松點擊他們。
邊框
對需要顯示邊框的元素，其邊框顏色可以采用半透明或淺色系，以增強可讀性。
文字
頁面內的文字要注意細體和粗體的表達，并對文字類的提示描述進行克制精簡。
高保真原型已經極度接近最終產品形態，在視覺和內容上都無限接近最終上線效果，結合交互和需求說明，便可進行設計的可能性驗證了。
要注意的是，設計時要注重頁面的簡潔性，以及背后交流的純粹性，讓用戶更清晰的感知產品功能及業務。
三、結語
原型頁面設計是一個從大到小逐層演化的過程，從了解并明確頁面信息點，再到頁面結構搭建，繪畫成低保真原型，最后進行細節優化。
值得注意的是，低保真原型注重完整業務流程的表達，而高保真則是對視覺效果的優化，且繪畫高保真原型圖的時間較長，回爐成本較高，我們應先以最低成本畫出一個“簡陋”的低保真，實驗自己的想法或通過初步評審后，時間充足且團隊需要時再繼續畫高保真原型。
最后，感謝大家的耐心閱讀，如果內容觀點有不對的地方，歡迎批評指正。
作者：陳星；公眾號：三月產品說
本文由 @陳星? 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash，基于CC0協議
非常有邏輯性的一篇好文！！
移動端交互設計
功能結構