如何優雅的設計APP頁面？

頁面框架設計只是整個產品設計中的一環，不要把眼界侷限在這一環，也不要只站需求、只站在交互、只站在視覺上思考問題，從多個角度看問題，你纔會學會成長。

產品設計是一個系統工程，單獨擰出來其中一個流程來說，都是割裂的，但在實際中又必須割裂出來，由於只有割裂出每一個流程，把每一個流程都想通想透，才能組成完整的產品設計的知識體系。那怎麼來權衡總體和局部，系統和部件，也是一門大學問。

1、明確頁面設計在整個產品設計中的位置

互聯網產品設計的流程大體是：產品定位——需求分析——信息架構設計——流程設計——頁面框架設計——設計說明——輸出設計文檔。能夠看到頁面設計是處於整個流程的後期，因此前期必須去和產品經理或者用研人員反覆溝通，明確產品定位、明確需求、瞭解業務流程，而後再梳理信息架構、產品的導航形式、任務流程和頁面流。

無論產品經理仍是交互或UI，都要去了解這些，並反覆溝通，這是基礎。全部的設計脫離了用戶和需求都是耍流氓。

其實這也是我在之前文章中反覆強調的，只要你從事的是產品設計的工做（目前涉及到的分工主要有產品經理、交互設計師、視覺設計師），都要從產品設計總體去思考問題，產品經理不要只想着需求，交互也不能只想着體驗，視覺也不能僅僅思考美不美觀，這種眼界的提高，會直接影響到設計方案。

若是你已經創建了整個產品設計的知識體系，這只是第一步，下一步你還有考慮產品運營，考慮商務、考慮資本，這些都是須要設計師去了解的。週末和朋友聊天的時候，他打了個很好的比喻，把公司比做一我的，那麼不一樣的職位就至關於每一個人的感官和外在，產品至關於一我的的大腦，視覺至關於一我的的衣品，商務至關於一我的的溝通能力…

你若是隻瞭解人的一個部分，就永遠沒辦法理解這我的。

我目前就在深耕產品設計的基礎上，在學習產品運營的知識。

2、肯定頁面目的和目標

明確了頁面設計的上游的流程，接下來要作的，是肯定頁面的目的和目標。

目的和目標是兩個概念，目的是你爲何要設計這個頁面，目標是設計這個頁面想要達成什麼。例如，電商的商品詳情頁目的是介紹商品、幫助用戶進行購買決策，目標就是提升用戶下單的轉化率。

京東&淘寶

做爲一樣的商品詳情頁面，不一樣的目的和目標，直接影響到設計形式。例如京東是自營商品，用戶一次性購買的越多，其客單價會更高、運營成本也會更低，因此它的商品詳情頁的主要目標是提升加入購物車的轉化率。而淘寶做爲一個平臺，單獨購買一件商品和一次性購買多件商品都很重要，因此它的加入購物車和當即購買的優先級是同等重要的。

記住：明確頁面目的和目標，這是你設計一個頁面的指導思想。

3、肯定頁面的來源和去處

任何單獨的頁面都只是用戶完成某個任務的其中一環，這個頁面從哪來？能去哪？影響着頁面的導航設計、以及工具欄上按鈕的擺放。

爲了延續性，繼續拿淘寶詳情頁來舉例。

返回上一級

分享&購買

返回頁面按照設計規範，基本會放在標題欄的左側，也有一些小衆APP考慮到單手操做放在頁面底部，其它如分享和更多通常會放在標題欄的右側。另外針對當前頁面的一些操做會放在工具欄上，例如淘寶的客服、店鋪、收藏、加入購物車、當即購買；例如資訊類APP的留言、點贊、收藏等。

在考慮頁面的去處的時候，通常有二級頁面的形式和臨時框的形式，臨時框又有模態和非模態的區別。例如淘寶的當即購買就用了模態臨時框，而沒有采用二級頁面，這能減小用戶在完成一個任務時的跳轉步驟，提升轉化率。

4、肯定頁面內容和優先級

通過前面三個步驟，頁面框架基本成型，如今就要往這個框架填充內容。根據信息架構設計，基本會肯定這個頁面須要包含哪些內容（關於信息架構設計，能夠參考《90%的設計師都不知道的信息架構知識》）。

其次就要肯定頁面信息的優先級，肯定優先級的斷定依據就是第一步所說的當前頁面的目的和目標，以及在作需求分析的時候，公司價值和用戶價值兩個價值維度的考量。而優先級對設計的影響有一下幾點：

①用對比的手法，明確信息層級，優先級越高信息表現越突出。例如上圖格和銷量字段的對比；

②優先級最高的放在用戶第一眼能看到的位置（頁面的第一屏）。例如將商品圖片、標題、價格放在第一屏的位置，評論則放在第二屏的位置；

③優先級低的要弱化、甚至是隱藏或刪除。客服、店鋪和收藏的按鈕相對於加入購物車和當即購買，很弱，消息、幫助、我要反饋則更弱，因此被收起在右上角更多的icon中。

5、考慮技術的侷限性

上次在作閱讀APP的時候（pad平臺），須要在E-Ink屏上的閱讀頁面增長豎屏模式，這種模式會更利於用戶進行閱讀的，相似於kindle的閱讀體驗。可是由於下屏沒有作G-senser，因此是不支持豎屏的，只好放棄。若是我實現不去了解這點，作出來的方案只是浪費時間。

現實作設計的過程當中還有不少相似的例子，不論是交互仍是視覺，老是會想到一些創新好玩的設計形式，每當這個時候必定要去和相關技術人員溝通，確保設計方案的可行性。此外還要考慮項目週期，若是上線時間緊迫，實際上是不容許設計師把設計形式作得很重的，只須要出一個簡單的保底方案便可。

我本身就有在作設計以前和相關技術溝通想法的習慣，真的幫助很大。

仍是文章前面的那句話，頁面框架設計只是整個產品設計中的一環。不要把眼界侷限在這一環，也不要只站需求、只站在交互、只站在視覺上思考問題，這樣你永遠是個美工，而不是一個設計師。設計師是一個能用設計語言提供系統性解決方案的人，而不是簡單畫圖的人。

題圖來自 Pexels ，基於 CC0 協議