APP頁(yè)面如何優(yōu)雅的設(shè)計(jì)

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

看到這種提問(wèn)，內(nèi)心一般是抗拒的，因?yàn)楫a(chǎn)品設(shè)計(jì)是一個(gè)系統(tǒng)工程，單獨(dú)擰出來(lái)其中一個(gè)流程來(lái)講，都是割裂的，但在實(shí)際中又必須割裂出來(lái)，因?yàn)橹挥懈盍殉雒總€(gè)流程，把每個(gè)流程都想通想透，才能組成完整的產(chǎn)品設(shè)計(jì)的知識(shí)體系。那怎么來(lái)權(quán)衡整體和局部，系統(tǒng)和部件，也是一門(mén)大學(xué)問(wèn)

一、明確頁(yè)面設(shè)計(jì)在整個(gè)產(chǎn)品設(shè)計(jì)中的位置

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

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

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

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

你如果只了解人的一個(gè)部分，就永遠(yuǎn)沒(méi)辦法理解這個(gè)人。

我目前就在深耕產(chǎn)品設(shè)計(jì)的基礎(chǔ)上，在學(xué)習(xí)產(chǎn)品運(yùn)營(yíng)的知識(shí)。

二、確定頁(yè)面目的和目標(biāo)

明確了頁(yè)面設(shè)計(jì)的上游的流程，接下來(lái)要做的，是確定頁(yè)面的目的和目標(biāo)。

目的和目標(biāo)是兩個(gè)概念，目的是你為什么要設(shè)計(jì)這個(gè)頁(yè)面，目標(biāo)是設(shè)計(jì)這個(gè)頁(yè)面想要達(dá)成什么。例如，電商的商品詳情頁(yè)目的是介紹商品、幫助用戶進(jìn)行購(gòu)買(mǎi)決策，目標(biāo)就是提高用戶下單的轉(zhuǎn)化率。

京東&淘寶

作為同樣的商品詳情頁(yè)面，不同的目的和目標(biāo)，直接影響到設(shè)計(jì)形式。例如京東是自營(yíng)商品，用戶一次性購(gòu)買(mǎi)的越多，其客單價(jià)會(huì)更高、運(yùn)營(yíng)成本也會(huì)更低，所以它的商品詳情頁(yè)的主要目標(biāo)是提高加入購(gòu)物車的轉(zhuǎn)化率。而淘寶作為一個(gè)平臺(tái)，單獨(dú)購(gòu)買(mǎi)一件商品和一次性購(gòu)買(mǎi)多件商品都很重要，所以它的加入購(gòu)物車和立即購(gòu)買(mǎi)的優(yōu)先級(jí)是同等重要的。

記?。好鞔_頁(yè)面目的和目標(biāo)，這是你設(shè)計(jì)一個(gè)頁(yè)面的指導(dǎo)思想。

三、確定頁(yè)面的來(lái)源和去處

任何單獨(dú)的頁(yè)面都只是用戶完成某個(gè)任務(wù)的其中一環(huán)，這個(gè)頁(yè)面從哪來(lái)?能去哪?影響著頁(yè)面的導(dǎo)航設(shè)計(jì)、以及工具欄上按鈕的擺放。

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

返回上一級(jí)

分享&購(gòu)買(mǎi)

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

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

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

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

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

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

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

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

五、考慮技術(shù)的局限性

上次在做閱讀APP的時(shí)候(pad平臺(tái))，需要在E-Ink屏上的閱讀頁(yè)面增加豎屏模式，這種模式會(huì)更利于用戶進(jìn)行閱讀的，類似于kindle的閱讀體驗(yàn)。但是因?yàn)橄缕翛](méi)有做G-senser，所以是不支持豎屏的，只好放棄。如果我實(shí)現(xiàn)不去了解這點(diǎn)，做出來(lái)的方案只是浪費(fèi)時(shí)間。

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

我自己就有在做設(shè)計(jì)之前和相關(guān)技術(shù)溝通想法的習(xí)慣，真的幫助很大。

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

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

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

廣告

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