本文是根據(jù)目前在京東任職的一位資深UI設(shè)計(jì)師的專訪進(jìn)行的文字版整理,這位UI大神從業(yè)時(shí)間5年,具有豐富的品牌知識(shí)與設(shè)計(jì)經(jīng)驗(yàn),總結(jié)了4條行業(yè)經(jīng)驗(yàn),快來(lái)看看吧,希望這篇文章對(duì)你有所幫助。——AAA小編
從少年到大叔,只用了5年,還記得我剛?cè)肼毜牡谝环莨ぷ鞯膶?dǎo)師和我說(shuō):「設(shè)計(jì)沒(méi)有什么捷徑,有的只是多看、多想、多做,邏輯思維明確了,思路清晰了,累積多了,項(xiàng)目方案就好解決了」。在5年的工作中,也累積了一些心得,下面就和大家聊聊我對(duì) UI設(shè)計(jì)的幾點(diǎn)心得和一些啟發(fā)。
1. 產(chǎn)品思路要吃透
詳細(xì)地分析需求,能讓設(shè)計(jì)師更好的把握產(chǎn)品的思路。多看需求中交互或產(chǎn)品給出的產(chǎn)品流程圖,在初步的交互結(jié)構(gòu)圖中,可以根據(jù)需求大致的構(gòu)造頁(yè)面的布局和排版,把頁(yè)面內(nèi)容布局和排版記入心中,為整個(gè)項(xiàng)目打下一個(gè)埋點(diǎn),為將來(lái)設(shè)計(jì)創(chuàng)作時(shí)找設(shè)計(jì)參考打好基礎(chǔ)。
2. 換位思考很重要
分析需求時(shí),需要更多的站在交互或產(chǎn)品經(jīng)理的角度上去看待問(wèn)題,多看交互流程圖,多想產(chǎn)品的邏輯思維,消化交互(產(chǎn)品經(jīng)理)的整個(gè)產(chǎn)品引導(dǎo)意向。例如之前小編做過(guò)的一個(gè)案例,項(xiàng)目為智能家居管理和操控的 APP,在頁(yè)面里有搜索框,但是基于公司本身的業(yè)務(wù)和硬件接入最多就二十個(gè)左右,兩三屏的滾動(dòng)查看就看完,對(duì)于本身的搜索意義不大。但對(duì)于產(chǎn)品經(jīng)理,在產(chǎn)品的延伸性和前瞻性來(lái)看,這功能必須要有,所以了解了產(chǎn)品的意圖和產(chǎn)品經(jīng)理的思路,我做出了如下的修改:
把搜索框隱藏起來(lái)做為按鈕,當(dāng)用戶需要時(shí)點(diǎn)擊按鈕,跳出搜索內(nèi)容界面,這樣就可以把屏幕空間多留給主要功能展示,同時(shí)讓頁(yè)面布局嚴(yán)謹(jǐn)不零碎。
1. 分析用戶使用人群
我們?cè)谧霎a(chǎn)品之前,首先要分析產(chǎn)品內(nèi)在需求和使用人群,為了更好的對(duì)用戶動(dòng)機(jī)深挖,最好搭建產(chǎn)品架構(gòu)分析圖和目標(biāo)用戶動(dòng)機(jī)分析圖,這樣帶邏輯性地去分析,對(duì)于我們前期做設(shè)計(jì)推導(dǎo)和產(chǎn)品初步的風(fēng)格落實(shí)起到更好的數(shù)據(jù)支撐。例如下面就是我們團(tuán)隊(duì)對(duì)于現(xiàn)有的一個(gè) APP 功能深挖的分析圖以及一些目標(biāo)用戶的行為分析。
把一些點(diǎn)列出來(lái),預(yù)估會(huì)發(fā)生的事件,預(yù)估我們產(chǎn)品因?yàn)槭录淖呦?,以及功能使用?chǎng)景指向等發(fā)生的事件都例舉出來(lái),這樣對(duì)于我們定義視覺(jué)風(fēng)格時(shí)更利于站在用戶角度考慮用戶需要什么,我們?cè)O(shè)立的風(fēng)格對(duì)用戶行為動(dòng)機(jī)產(chǎn)生什么影響。
2. 分析產(chǎn)品功能屬性
對(duì)于人,我們往往根據(jù)他的性格、年齡、打扮,職業(yè)等,給他貼上標(biāo)簽屬性。例如一個(gè)女生打扮性感,我們會(huì)給她貼「御姐范」。年紀(jì)小打扮可愛(ài)的會(huì)貼屬性「蘿莉」「軟妹子」。同時(shí)我們產(chǎn)品也是有對(duì)應(yīng)的屬性之分,一個(gè)產(chǎn)品往往根據(jù)自身主打功能來(lái)歸屬他的標(biāo)簽屬性。例如產(chǎn)品有專屬與固定職業(yè)使用的我們稱為工具類app;有分享、語(yǔ)音、人與人之間互動(dòng)的我們稱為社交類app;集采購(gòu)、買(mǎi)賣東西的我們稱為電商類app。這些種種的類別屬性劃分,在這個(gè)類別下還有細(xì)分屬性的劃分,我們往下延伸引導(dǎo)。例如這個(gè)app是社交類的,那它的主打是「男性」?「女性」?「兩性」?「老年人」?「年輕人」?如果確定是女性那主打的是什么年齡層次女性,是「15-25」?「25-35」?「35-45」?這些等等的往下細(xì)分屬性,面對(duì)這樣我們可以用一個(gè)思維導(dǎo)圖分析,深入剖析我們想要的數(shù)據(jù)。
這樣一層層深入挖掘分析,最后合理的得出使用人群的偏好、屬性、使用場(chǎng)景,這樣帶邏輯的一層一層往下走對(duì)于我們定義一款新的 App 產(chǎn)品的設(shè)計(jì)風(fēng)格有更明確的指引作用。
1. 把握頁(yè)面節(jié)奏
音樂(lè)節(jié)奏會(huì)帶動(dòng)人的心情高低起伏,那么什么是頁(yè)面的節(jié)奏呢?我們說(shuō)頁(yè)面的節(jié)奏是指我們頁(yè)面布局怎么去分割,給予用戶什么樣的視覺(jué)體驗(yàn),讓用戶第一眼看到什么,第二眼知道有什么,第三眼發(fā)現(xiàn)什么,都是我們視覺(jué)思路明確帶著用戶去體驗(yàn)的。
在層級(jí)關(guān)系上,我們要拿捏規(guī)劃好,主推功能內(nèi)容和附帶功能內(nèi)容還有運(yùn)營(yíng)需要達(dá)到什么效果,都是需要明確的思路帶用戶往下走的,下面是小編之前做過(guò)的一個(gè)案例:
公司的主打產(chǎn)品是硬件銷售,而且明星產(chǎn)品是路由器,所以才衍生了這個(gè)共享Wi-Fi app,我們硬件用戶基數(shù)比較大,所以主要是購(gòu)買(mǎi)了我們的路由器都可以下載這個(gè) app,把自己家多余的 Wi-Fi流量分享出去得到一些報(bào)酬。
在表面上我們看似是一個(gè)共享功能的app,其實(shí)我們的潛功能目的是為了通過(guò) app 把用戶導(dǎo)入商城購(gòu)買(mǎi)硬件,所以在主要頁(yè)面上我們把廣告位特別突出,弱化了主要的連接功能,讓用戶使用連接功能時(shí)先看到商城優(yōu)惠信息,同時(shí)文案引導(dǎo)去連接Wi-Fi的用戶,讓其產(chǎn)生疑問(wèn)「干嘛不自己再買(mǎi)個(gè)路由器去分享Wi-Fi增加收益」的心理動(dòng)機(jī),所以在頁(yè)面視覺(jué)上我第一眼讓用戶看見(jiàn)廣告,第二眼知道有Wi-Fi連接功能,第三再發(fā)現(xiàn)怎么去使用我們Wi-Fi功能,這樣一步一步讓用戶跟著我設(shè)計(jì)思路的節(jié)奏走。
產(chǎn)品邏輯思路明確,用戶就會(huì)知道他處在當(dāng)前位置應(yīng)該操作什么,下一步該做什么。
2. 尊敬交互邏輯
在比賽上,我們說(shuō)要尊敬對(duì)手,其實(shí)在共事中,我們也需要尊重交互設(shè)計(jì)的交互流程圖,不要隨意更改交互邏輯,如果產(chǎn)生歧義要合理溝通,找解決方案,所以這時(shí)候我們?cè)谇懊嬷v到的在產(chǎn)品分析上吃透產(chǎn)品需求了,可以從產(chǎn)品上出發(fā)和交互探討,目的達(dá)到一致才可以更改。如果我們只是為了視覺(jué)上的效果好看而去更改交互,讓整個(gè) app 交互處于不流暢、不合理是不對(duì)的。
小編曾經(jīng)碰到一個(gè)剛轉(zhuǎn)型的 UI設(shè)計(jì)師,因?yàn)轫?yè)面有很多選擇項(xiàng)的功能,需要一一選擇點(diǎn)擊彈出不同彈窗給用戶選擇對(duì)應(yīng)的內(nèi)容,因?yàn)檫x擇項(xiàng)的功能比較多。在頁(yè)面布局上不好對(duì)齊和平衡,結(jié)果他把幾個(gè)不同功能選擇的彈出組件合成一個(gè),在彈出選擇的組件上加選擇項(xiàng)分區(qū),這樣做后在用戶角度上,用戶選擇了第一個(gè)功能選項(xiàng)卻把下面的未知功能都選擇了,模糊了用戶當(dāng)前使用位置,讓用戶陷入了不知下一步怎么操作,怎么往下走,這種交互中斷的UI是不合理的。因?yàn)楝F(xiàn)有的app,很多用戶的使用習(xí)慣已經(jīng)完成慣性的邏輯思維,我們想創(chuàng)新交互,必須在現(xiàn)有的基礎(chǔ)上改良或修改,而且是必須合理的,這樣才不會(huì)讓用戶在使用產(chǎn)品過(guò)程中產(chǎn)生疑惑或焦慮。
在視覺(jué)設(shè)計(jì)時(shí),我們?cè)O(shè)計(jì)師應(yīng)該跳出設(shè)計(jì)思維的誤區(qū),不要想著我們?cè)O(shè)計(jì)把頁(yè)面做好看就可以了,其他的不是我負(fù)責(zé)的就不管了,往往這樣是錯(cuò)的,把頁(yè)面做得好看是我們的基本責(zé)任,把頁(yè)面做得好看又好用才是我們要達(dá)到的最終目標(biāo)。所以我們?cè)O(shè)計(jì)師應(yīng)該多學(xué)習(xí)交互邏輯和熟悉產(chǎn)品思路,這樣做出來(lái)的作品才是有靈魂的。
3. 規(guī)范細(xì)化
規(guī)范對(duì)于我們?cè)O(shè)計(jì)的核心就是靈魂,視覺(jué)上游對(duì)接交互(產(chǎn)品經(jīng)理),下游對(duì)接開(kāi)發(fā)人員,它都起到闡述設(shè)計(jì)的規(guī)范化、統(tǒng)一化,讓外人可以讀懂我們?cè)O(shè)計(jì)的邏輯思路。
規(guī)范細(xì)化在交接工作中也會(huì)起到高效率的溝通對(duì)接橋梁,所以在設(shè)計(jì)好頁(yè)面時(shí)我們應(yīng)該細(xì)化地整理輸出一份設(shè)計(jì)規(guī)范,規(guī)定「標(biāo)題」「副標(biāo)題」「正文」等一系列共同使用的組件的大小、狀態(tài)、間距都是有共通性,邏輯性的,這樣開(kāi)發(fā)在寫(xiě)頁(yè)面過(guò)程中知道我們?cè)O(shè)計(jì)規(guī)范里的共通點(diǎn),在實(shí)現(xiàn)頁(yè)面中就會(huì)有底,知道注意哪些點(diǎn)的字號(hào)用多少,間距是多少等等,我們后期驗(yàn)收工作也會(huì)減少很多勞動(dòng)力。同時(shí)在我們?cè)O(shè)計(jì)與程序之間慢慢地建立合作默契,完成以后工作任務(wù)也達(dá)到事半功倍的效果。
1. 關(guān)注用戶數(shù)據(jù)和反饋
項(xiàng)目的上線不意味著我們的任務(wù)已經(jīng)完成,打造一個(gè)優(yōu)秀的app 是要不斷地迭代和完善的,app上線后真正的接觸了用戶,用戶的使用數(shù)據(jù)和反饋才是檢驗(yàn)我們勞動(dòng)成果的最真實(shí)證據(jù)。
上線后我們?cè)O(shè)計(jì)需要多關(guān)注用戶的使用數(shù)據(jù),關(guān)注功能點(diǎn)擊率和留存率,多查看app商城用戶評(píng)分,認(rèn)真看反饋的評(píng)論和后臺(tái)收集的用戶意見(jiàn),這些最貼近用戶的真實(shí)反饋,累積下來(lái)處理,是我們下次迭代的動(dòng)力,這樣一步步根據(jù)用戶的體驗(yàn)去優(yōu)化的產(chǎn)品,才是真正意義上的一個(gè)優(yōu)秀app產(chǎn)品。
2. 做好項(xiàng)目總結(jié)
所謂總結(jié)寫(xiě)得好,加分又加獎(jiǎng),設(shè)計(jì)師必須把自己做項(xiàng)目的設(shè)計(jì)思維表達(dá)出來(lái),把自己設(shè)計(jì)中所踩的坑、埋的坑,條理分明的例舉出來(lái),避免下次迭代和其他項(xiàng)目再犯同樣錯(cuò)誤,同時(shí)項(xiàng)目亮點(diǎn)也可以記錄說(shuō)明,這樣下次再做項(xiàng)目,吸取之前的成功經(jīng)驗(yàn),避開(kāi)踩過(guò)的坑,更利于我們做好每一個(gè)產(chǎn)品,提高工作效率。
總結(jié):
以上幾點(diǎn)就是我在工作中血與淚的教訓(xùn)得出的經(jīng)驗(yàn)。UI設(shè)計(jì)與其他視覺(jué)的區(qū)分可能就是更多的考慮可玩性、使用性、耐用性,比視覺(jué)第一沖擊力還重要。
填寫(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-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc