旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢(xún)熱線:010-5367 2995
首頁(yè) > 熱門(mén)文章 > UI設(shè)計(jì) > UI設(shè)計(jì)中引導(dǎo)頁(yè)設(shè)計(jì)指南

UI設(shè)計(jì)中引導(dǎo)頁(yè)設(shè)計(jì)指南

時(shí)間:2020-08-18來(lái)源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-08-18點(diǎn)擊量:作者:Gella

  一個(gè)好的引導(dǎo)頁(yè)設(shè)計(jì)會(huì)給用戶(hù)留下良好的第一印象。也可以降低用戶(hù)的學(xué)習(xí)成本,快速上手產(chǎn)品并了解新增功能,避免用戶(hù)使用過(guò)程中的迷茫,減少誤操作,是提升產(chǎn)品體驗(yàn)的必要手段。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中引導(dǎo)頁(yè)設(shè)計(jì)指南進(jìn)行簡(jiǎn)單的說(shuō)明。
 

  1、需求分析,提煉關(guān)鍵詞
 

  需求內(nèi)容:新用戶(hù)引導(dǎo)頁(yè)面,展示產(chǎn)品新功能,符合整體設(shè)計(jì)風(fēng)格。
 

  產(chǎn)品文案:
 

  海量圖書(shū)一網(wǎng)打盡
 

  影視原著、猜你喜歡、全網(wǎng)熱議
 

  不讀書(shū)也給你好看
 

  書(shū)評(píng)互動(dòng)、專(zhuān)欄文章、福利活動(dòng)
 

  仔細(xì)一看,此文案對(duì)仗工整,讀起來(lái)朗朗上口,幾乎無(wú)可挑剔…
 

  讀了一遍又一遍,發(fā)現(xiàn)文案表現(xiàn)的重點(diǎn)比較多而且分散,沒(méi)有明確具體功能點(diǎn),難以形成整體的畫(huà)面感。為避免信息傳遞偏差,減少不必要的改稿要求,我們有必要和產(chǎn)品經(jīng)理溝通文案。主次文案只是表達(dá)的工具,明確要達(dá)成的功能目標(biāo)才是重點(diǎn)。
 

  第一張圖的主題:重點(diǎn)在于展示海量書(shū)籍,并且用影視書(shū)來(lái)拉近和用戶(hù)的距離;其次是一個(gè)產(chǎn)品特點(diǎn)猜你喜歡推薦功能;評(píng)論互動(dòng)的氛圍也需要烘托一下。
 

  提煉關(guān)鍵詞:書(shū)多、影視
 


 

  第二張圖的主題:重點(diǎn)展示發(fā)現(xiàn)頁(yè)的新功能專(zhuān)欄和評(píng)論互動(dòng),其次是優(yōu)惠券相關(guān)的福利活動(dòng)。
 

  提煉關(guān)鍵詞:互動(dòng)、福利

 



 

  接下來(lái)所有的視覺(jué)設(shè)計(jì)都圍繞這兩個(gè)主題,也就是產(chǎn)品經(jīng)理想要表達(dá)的關(guān)鍵點(diǎn)。
 

  2、讓主視覺(jué)準(zhǔn)確表達(dá)關(guān)鍵詞
 

  在這個(gè)過(guò)程中,經(jīng)常會(huì)出現(xiàn)設(shè)計(jì)稿表達(dá)的意思和產(chǎn)品經(jīng)理心中的畫(huà)面相距甚遠(yuǎn),不同的設(shè)計(jì)師針對(duì)一樣的文案也會(huì)設(shè)計(jì)出完全不一樣的方案,大部分原因是畫(huà)面表達(dá)的關(guān)鍵詞有偏差。前面的關(guān)鍵詞提煉已經(jīng)幫我們大概確定了畫(huà)面的中心含義,接下來(lái)怎么辦呢?

 



 

  我們上小學(xué)一年級(jí)的時(shí)候都做過(guò)經(jīng)典的看圖作文,重溫一下美好的童年~~~看圖作文一般都會(huì)給一張圖畫(huà),然后一個(gè)明確的標(biāo)題。圖畫(huà)結(jié)合標(biāo)題,作文的內(nèi)容基本限定在一個(gè)范圍內(nèi),只要不出現(xiàn)大的理解偏差,一般不會(huì)跑題。也就能寫(xiě)出來(lái)合格的作文。
 

  看圖作文的流程: 圖片—關(guān)鍵詞—寫(xiě)作文
 

  順序反過(guò)來(lái),就是引導(dǎo)頁(yè)設(shè)計(jì)流程:文案—關(guān)鍵詞—圖片
 

  這樣就可以確定下來(lái)兩張引導(dǎo)頁(yè)的框架:

 



 

  3、確定視覺(jué)風(fēng)格
 

  常言道:知己知彼,百戰(zhàn)不殆。站在巨人的肩膀上才能看得更遠(yuǎn)…相信你每次做設(shè)計(jì)的之前就已經(jīng)了解過(guò)大部分的同類(lèi)競(jìng)品。根據(jù)視覺(jué)表現(xiàn)風(fēng)格分類(lèi)概括,功能引導(dǎo)頁(yè)基本可以分為四大類(lèi):

 



 

  情景類(lèi)——表現(xiàn)力豐富,把握難度較高,設(shè)計(jì)周期長(zhǎng)。
 

  抽象類(lèi)——抽象展示功能點(diǎn),不依賴(lài)頁(yè)面,靈活但表意寬泛。
 

  示意類(lèi)——對(duì)頁(yè)面的功能模塊概括展示,簡(jiǎn)潔清晰,個(gè)別頁(yè)面適合
 

  截屏類(lèi)——主視覺(jué)為實(shí)際截圖,表達(dá)準(zhǔn)確,簡(jiǎn)單穩(wěn)定。
 

  綜合考慮后選擇了抽象類(lèi)的視覺(jué)風(fēng)格。
 

  視覺(jué)風(fēng)格要和品牌風(fēng)格一致,產(chǎn)品的每個(gè)部分傳達(dá)給用戶(hù)同樣的品牌形象,就可以加強(qiáng)品牌在用戶(hù)心理的認(rèn)知。必要的時(shí)候也需要和產(chǎn)品經(jīng)理討論用哪種設(shè)計(jì)風(fēng)格更貼合產(chǎn)品的氣質(zhì)。如果前期沒(méi)有確認(rèn)好視覺(jué)風(fēng)格,在頁(yè)面繪制完之后評(píng)審發(fā)現(xiàn)風(fēng)格上的問(wèn)題,會(huì)導(dǎo)致大量的修改甚至推倒重做,影響進(jìn)度和效率。
 

  4、手繪草稿
 

  手繪草稿成本低廉,實(shí)現(xiàn)迅速。草圖不需要看上去很漂亮;只需要表達(dá)出想法,引發(fā)討論和催生想法即可。這一步非常重要,可以對(duì)初稿有基本的把握,減少反復(fù)修改。堅(jiān)持手繪草稿設(shè)計(jì),原創(chuàng)能力會(huì)有較大的提升。
 

  多版本草圖嘗試,思路會(huì)非常多且清晰。如果時(shí)間充足可以整理出最終版。

 




 

  5、軟件繪制
 

  草圖的勾畫(huà)不能占用太多時(shí)間,基本確定好之后進(jìn)行軟件繪制,過(guò)程中還可以隨時(shí)進(jìn)行調(diào)整。
 

  下面是根據(jù)草圖進(jìn)行的繪制,前期可以用單色,把注意力集中在構(gòu)圖和形態(tài)上,好的基礎(chǔ)會(huì)給之后的工作減少阻力。

 




 

  在選取顏色的時(shí)候,可以選取和自身產(chǎn)品相關(guān)的色調(diào),也可以大膽配色,這取決于通過(guò)色彩傳達(dá)的情緒和品牌感。在這里我的配色方案主要基于產(chǎn)品的主色和輔助色的變化延伸。
 

  6、增加質(zhì)感和調(diào)整細(xì)節(jié)
 

  兩張圖基本設(shè)計(jì)完成,根據(jù)畫(huà)面情況再做一些加減法。
 

  在畫(huà)面上我們可以通過(guò)增加紋理等技法使畫(huà)面更有質(zhì)感,在陰影部分可以增加雜色,豐富畫(huà)面的細(xì)節(jié)。比如可以給人物加一個(gè)陰影,給手機(jī)增加一些光線,加一些若影若現(xiàn)的背景等等。

 



 

  7、動(dòng)效設(shè)計(jì)
 

  調(diào)整完成之后,使用動(dòng)效軟件加一些細(xì)微的動(dòng)效讓畫(huà)面更加生動(dòng),前提是需要和開(kāi)發(fā)討論動(dòng)效實(shí)現(xiàn)方案。
 

  引導(dǎo)頁(yè)重在強(qiáng)調(diào)產(chǎn)品的核心功能與優(yōu)勢(shì),上一頁(yè)與下一頁(yè)啟到承上啟下的作用,好的視覺(jué)配上動(dòng)畫(huà)會(huì)使引導(dǎo)頁(yè)更加生動(dòng)有吸引力。
 

  總結(jié)
 

  如果你做引導(dǎo)頁(yè)的時(shí)候不知道如何下手,可以嘗試一下這個(gè)思路。其實(shí)大部分設(shè)計(jì)工作都可以用這個(gè)思路去完成,希望這篇文章能夠給予更多新手設(shè)計(jì)師一些靈感和幫助。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問(wèn)AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。




 

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖