旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > 新功能引導(dǎo)頁設(shè)計思路總結(jié)
新功能引導(dǎo)頁設(shè)計思路總結(jié)
時間:2018-01-29來源:lb577.com點擊量:作者:馬晨皓
時間:2018-01-29點擊量:作者:馬晨皓

一. 需求分析

1. 新功能是什么?

收到運營那邊的文案是這樣的:

  • 照護計劃全程管理:規(guī)律復(fù)診日期、復(fù)查項目提前查看。
  • 全新健康頁面:健康檔案、近7天自測、飲食運動數(shù)據(jù)一目了然。
  • 新增發(fā)現(xiàn)頁面:精選高質(zhì)量控糖知識等你發(fā)現(xiàn)。
  • 用藥、測量提醒:藥物、測量提醒如約而至,血糖管理更輕松。

了解到新功能大致是說照護計劃管理、增加健康檔案、發(fā)現(xiàn)頁面、提醒功能這幾點,然后向產(chǎn)品詢問這些具體的功能點如何使用,解決了用戶什么樣的問題等等。由于這些功能的界面設(shè)計之前也是由我來完成的,前期也和產(chǎn)品有過溝通我就跳過了這一步,實際上在不了解功能的時候是需要去確認(rèn)一下的。

2. 如何使畫面貫穿文案內(nèi)容表達(dá)新功能特點?

上小學(xué)的時候我們都做過看圖說話的題目,在這里我們需要反過來看字畫圖。首先在腦海里想象各式各樣畫面,然后通過關(guān)鍵詞搜索把我們腦海里浮現(xiàn)出來的畫面尋找出來。當(dāng)然如果想象不到畫面我們同樣可以去搜索圖片去構(gòu)建想象。想象一下作為用戶,使用這些功能時候的場景。

照護計劃全程管理:規(guī)律復(fù)診日期、復(fù)查項目提前查看。

我的腦海里出現(xiàn)的是這樣的畫面,一個控制臺,用戶能夠全程掌握自己的計劃管理。

全新健康頁面:健康檔案、近7天自測、飲食運動數(shù)據(jù)一目了然。

想象畫面是這樣,用戶在運動,運動完之后查看自己的健康數(shù)據(jù)。

新增發(fā)現(xiàn)頁面:精選高質(zhì)量控糖知識等你發(fā)現(xiàn)。

想象用戶在去探索新功能,打開新世界的大門。

用藥、測量提醒:藥物、測量提醒如約而至,血糖管理更輕松。

想象一個人躺著很放松的樣子。

 

二. 確認(rèn)視覺風(fēng)格

這一步需要收集大量的不同視覺風(fēng)格圖片確定視覺方向,為了減少不必要的改稿要求,我會給產(chǎn)品快速瀏覽搜集到的圖片,討論視覺風(fēng)格的方向。當(dāng)然這里不是為了去迎合產(chǎn)品的口味,不是每一個產(chǎn)品都對視覺流行趨勢有良好的嗅覺,在這里主要是討論時下的流行設(shè)計技法和適合我們產(chǎn)品App的風(fēng)格利弊。如果前期沒有確認(rèn)好視覺風(fēng)格,在頁面繪制完之后評審時說風(fēng)格上的問題就會導(dǎo)致大量的修改甚至推倒重做,影響進程和效率。最后討論結(jié)果是結(jié)合手繪和當(dāng)下比較流行的2.5D風(fēng)格。



 

三. 繪制設(shè)計稿

1. 繪制草圖

第一稿快速繪制的草圖比較亂……繪制到這里其實思路已經(jīng)非常清晰了,如果時間充足可以整理一下再繪制一版清爽干凈的草圖。繪制草圖是非常重要的步驟,一定不要急于直接上機。建議像我一樣手繪不太好的設(shè)計師草圖也可以借用一下輔助線或者網(wǎng)格線。

2. 線稿

剛開始做設(shè)計的時候為了省事我也習(xí)慣于一邊上色一邊繪圖,這樣效率反而會降低。就像以前畫畫的時候我們都需要先打好型再上色,更加直觀也便于修改,這里其實也類似于先做一個低保真模型,后面上色就很快了。

3. 上色

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

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

在畫面上我們可以通過增加顆粒等技法使畫面更有質(zhì)感,在陰影部分可以增加雜色,會更加豐富畫面的細(xì)節(jié)。添加顆粒質(zhì)感的方法有很多,可以在畫面繪制完成之后導(dǎo)入PS里使用畫筆工具再次繪制,在這里我直接使用sketch的顆粒填充并進行調(diào)整。最后進行微調(diào),再次豐富畫面,比如可以給人物加一個陰影,給手機增加一些光線,加一些若影若現(xiàn)的背景等等。

5. 動效加成

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



 

總結(jié)

從收到需求到交付,過程中需要反復(fù)去和產(chǎn)品討論進程,以免后期不必要的修改和爭論影響進度和效率。切圖和標(biāo)注要仔細(xì)確認(rèn),圖片大小不要有偏差,交付給開發(fā)之后需要跟進開發(fā)進度確認(rèn)完成度,開戶程序員人人有責(zé)。上線之后要總結(jié)和分析不足之處,在之后的設(shè)計中加以改進。聽取反饋意見,是否達(dá)到了傳達(dá)意圖分析所在問題之處。以上就是我對這次設(shè)計的總結(jié),希望能夠給大家?guī)韼椭?,大家也可以提出問題和建議。

預(yù)約申請免費試聽課

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

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

?2007-2021/ lb577.com 北京漫動者教育科技有限公司 備案號:京ICP備12034770號 監(jiān)督電話:010-62568622 郵箱:bjaaa@aaaedu.cc