APP頁面如何優(yōu)雅的設計

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

看到這種提問，內(nèi)心一般是抗拒的，因為產(chǎn)品設計是一個系統(tǒng)工程，單獨擰出來其中一個流程來講，都是割裂的，但在實際中又必須割裂出來，因為只有割裂出每個流程，把每個流程都想通想透，才能組成完整的產(chǎn)品設計的知識體系。那怎么來權衡整體和局部，系統(tǒng)和部件，也是一門大學問

一、明確頁面設計在整個產(chǎn)品設計中的位置

互聯(lián)網(wǎng)產(chǎn)品設計的流程大致是：產(chǎn)品定位——需求分析——信息架構設計——流程設計——頁面框架設計——設計說明——輸出設計文檔?？梢钥吹巾撁嬖O計是處于整個流程的后期，所以前期必須去和產(chǎn)品經(jīng)理或者用研人員反復溝通，明確產(chǎn)品定位、明確需求、了解業(yè)務流程，然后再梳理信息架構、產(chǎn)品的導航形式、任務流程和頁面流。

不管產(chǎn)品經(jīng)理還是交互或UI，都要去了解這些，并反復溝通，這是基礎。所有的設計脫離了用戶和需求都是耍流氓。

其實這也是我在以前文章中反復強調(diào)的，只要你從事的是產(chǎn)品設計的工作(目前涉及到的分工主要有產(chǎn)品經(jīng)理、交互設計師、視覺設計師)，都要從產(chǎn)品設計整體去思考問題，產(chǎn)品經(jīng)理不要只想著需求，交互也不能只想著體驗，視覺也不能僅僅思考美不美觀，這種眼界的提升，會直接影響到設計方案。

如果你已經(jīng)建立了整個產(chǎn)品設計的知識體系，這只是第一步，下一步你還有考慮產(chǎn)品運營，考慮商務、考慮資本，這些都是需要設計師去了解的。周末和朋友聊天的時候，他打了個很好的比喻，把公司比作一個人，那么不同的職位就相當于每個人的感官和外在，產(chǎn)品相當于一個人的大腦，視覺相當于一個人的衣品，商務相當于一個人的溝通能力…

你如果只了解人的一個部分，就永遠沒辦法理解這個人。

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

二、確定頁面目的和目標

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

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

京東&淘寶

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

記?。好鞔_頁面目的和目標，這是你設計一個頁面的指導思想。

三、確定頁面的來源和去處

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

為了延續(xù)性，繼續(xù)拿淘寶詳情頁來舉例。

返回上一級

分享&購買

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

在考慮頁面的去處的時候，一般有二級頁面的形式和臨時框的形式，臨時框又有模態(tài)和非模態(tài)的區(qū)別。例如淘寶的立即購買就用了模態(tài)臨時框，而沒有采用二級頁面，這能減少用戶在完成一個任務時的跳轉步驟，提高轉化率。

四、確定頁面內(nèi)容和優(yōu)先級

經(jīng)過前面三個步驟，頁面框架基本成型，現(xiàn)在就要往這個框架填充內(nèi)容。根據(jù)信息架構設計，基本會確定這個頁面需要包含哪些內(nèi)容(關于信息架構設計，可以參考《90%的設計師都不知道的信息架構知識》)。

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

①用對比的手法，明確信息層級，優(yōu)先級越高信息表現(xiàn)越突出。例如上圖格和銷量字段的對比;

②優(yōu)先級高的放在用戶第一眼能看到的位置(頁面的第一屏)。例如將商品圖片、標題、價格放在第一屏的位置，評論則放在第二屏的位置;

③優(yōu)先級低的要弱化、甚至是隱藏或刪除?？头⒌赇伜褪詹氐陌粹o相對于加入購物車和立即購買，很弱，消息、幫助、我要反饋則更弱，所以被收起在右上角更多的icon中。

五、考慮技術的局限性

上次在做閱讀APP的時候(pad平臺)，需要在E-Ink屏上的閱讀頁面增加豎屏模式，這種模式會更利于用戶進行閱讀的，類似于kindle的閱讀體驗。但是因為下屏沒有做G-senser，所以是不支持豎屏的，只好放棄。如果我實現(xiàn)不去了解這點，做出來的方案只是浪費時間。

現(xiàn)實做設計的過程中還有很多類似的例子，不管是交互還是視覺，總是會想到一些創(chuàng)新好玩的設計形式，每當這個時候一定要去和相關技術人員溝通，確保設計方案的可行性。此外還要考慮項目周期，如果上線時間緊迫，其實是不允許設計師把設計形式做得很重的，只需要出一個簡單的保底方案即可。

我自己就有在做設計之前和相關技術溝通想法的習慣，真的幫助很大。

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

網(wǎng)站名稱：APP頁面如何優(yōu)雅的設計
分享路徑：http://www.muchs.cn/news1/168101.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、動態(tài)網(wǎng)站、網(wǎng)站設計、外貿(mào)網(wǎng)站建設、標簽優(yōu)化、App設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)