UI設(shè)計(jì)課程中交互思維的分析與探究

陳心雨

摘要：為全鏈路設(shè)計(jì)行業(yè)時(shí)代背景下，高校UI設(shè)計(jì)課程培養(yǎng)交互思維UI設(shè)計(jì)人才提供方式方法。分析與探究交互思維在UI設(shè)計(jì)課程中的重要作用，結(jié)合教學(xué)案例，總結(jié)交互思維在設(shè)計(jì)前的需求分析、設(shè)計(jì)中的美觀度提升、設(shè)計(jì)后的設(shè)計(jì)驗(yàn)證。為提升學(xué)生對UI設(shè)計(jì)的多維度思維思考，提供符合設(shè)計(jì)原則和當(dāng)前行業(yè)背景的課程模塊。研究結(jié)果將為交互式思維在應(yīng)用型高校UI界面設(shè)計(jì)課程中的理論基礎(chǔ)和教學(xué)實(shí)踐提供新的理念與參考。

關(guān)鍵詞：交互思維 UI設(shè)計(jì)課程 用戶體驗(yàn) 全鏈路設(shè)計(jì)

中圖分類號：J524 文獻(xiàn)標(biāo)識碼：A

文章編號：1003-0069（2020）02-0076一02

一、前言

2017年阿里巴巴開始招收全鏈路設(shè)計(jì)師，引發(fā)了業(yè)內(nèi)很多討論。所謂全鏈路設(shè)計(jì)師，指的是多維度的思維與方式，要求設(shè)計(jì)師參與到整個(gè)商業(yè)鏈環(huán)節(jié)當(dāng)中來，為每一個(gè)影響用戶體驗(yàn)的地方提供可解決問題的設(shè)計(jì)方案，既要有滿足商業(yè)目標(biāo)的產(chǎn)品思路，又要具備把握高質(zhì)量的設(shè)計(jì)能力和交互思維。這一觀點(diǎn)意味著普通的UI設(shè)計(jì)師在這行業(yè)的生存空間會越來越狹窄。隨著手機(jī)終端技術(shù)的不斷發(fā)展，UI設(shè)計(jì)課程進(jìn)入各大院校，通常被劃分于視覺傳達(dá)專業(yè)。其作為一門課程在高等教育中內(nèi)容往往被應(yīng)用于探究二維、三維甚至四維形體所創(chuàng)造的設(shè)計(jì)，用于考察圖形的各種形態(tài)、組合方式、色彩搭配或布局排版的美感和優(yōu)雅度。[1]或是在該門課程的教學(xué)中反復(fù)強(qiáng)調(diào)以用戶為中心的原則，卻并沒有執(zhí)行實(shí)質(zhì)性的操作。甚至在不少企業(yè)中認(rèn)為UI設(shè)計(jì)師等同于美工，而筆者始終秉持著在UI設(shè)計(jì)中功能性大于美觀性的觀點(diǎn)。由此，更加深刻體會到引導(dǎo)學(xué)生交互思維的培養(yǎng)在我們的課程中需落到實(shí)處。

總之一現(xiàn)階段的教學(xué)已經(jīng)不能滿足學(xué)生在畢業(yè)后職場所對其的要求了，阻礙了學(xué)生設(shè)計(jì)思維分析能力。根據(jù)全鏈路行業(yè)背景的新要求和思維模式，為了擺脫過去學(xué)生設(shè)計(jì)作品忽視交互性與行業(yè)設(shè)計(jì)規(guī)范的學(xué)習(xí)狀態(tài)，致力于探究更具有多元化系統(tǒng)化的UI設(shè)計(jì)教學(xué)模塊，呈現(xiàn)符合簡易性、一致性、用戶習(xí)慣與需求、最小化思考負(fù)擔(dān)、布局清楚有序、交互性、靈活性和人性化等原則的UI作品。

以交互思維在UI設(shè)計(jì)課程中的應(yīng)用為切入點(diǎn)，引領(lǐng)設(shè)計(jì)初學(xué)者進(jìn)入學(xué)習(xí)領(lǐng)域，緊貼行業(yè)要求，重新構(gòu)建高校應(yīng)用型課程系統(tǒng)化的教學(xué)模塊，為未來UI行業(yè)發(fā)展理論基礎(chǔ)和教學(xué)實(shí)踐提供新的理念與參考。

二、構(gòu)建交互思維式UI設(shè)計(jì)課程的教學(xué)模塊

UI設(shè)計(jì)師余振華先生在他《術(shù)與道移動(dòng)應(yīng)用UI設(shè)計(jì)必修課》書中肯定了UI設(shè)計(jì)知識體系的龐大，同時(shí)也在術(shù)之篇中對移動(dòng)應(yīng)用設(shè)計(jì)相關(guān)的基礎(chǔ)知識進(jìn)行闡述。在開展UI設(shè)計(jì)課程初期，首先需要帶領(lǐng)初學(xué)者清楚幾個(gè)基本概念，并且要有自己的理解與想法。比如，UI設(shè)計(jì)的概念，交互設(shè)計(jì)的概念，什么是用戶體驗(yàn)？什么是用戶需求？并且要清楚整個(gè)APP的設(shè)計(jì)流程和每個(gè)階段主要產(chǎn)出是什么，也需要了解UI設(shè)計(jì)師主要負(fù)責(zé)哪個(gè)階段以及自己需要輸出的內(nèi)容。同樣也需要學(xué)生平時(shí)對生活經(jīng)驗(yàn)的累積，養(yǎng)成用交互思維觀察和思考的習(xí)慣。優(yōu)秀的UI設(shè)計(jì)師往往不缺乏生活的敏銳度，從生活的方方面面考慮用戶需求，包括產(chǎn)品全局和追根溯源。同時(shí)，要著重引領(lǐng)學(xué)生去思考“你想解決什么樣的用戶需求？”以此來確定調(diào)研方向和研究范疇。

順應(yīng)目前大部分學(xué)生在UI設(shè)計(jì)課程中存在的問題，交互思維的應(yīng)用可以從設(shè)計(jì)前、設(shè)計(jì)中和設(shè)計(jì)后這三個(gè)模塊著手。其中包括設(shè)計(jì)前的需求分析，設(shè)計(jì)中的美觀度提升、設(shè)計(jì)后對設(shè)計(jì)的驗(yàn)證，并且對每個(gè)模塊都提出了相應(yīng)的原則要求。

（一）模塊一：設(shè)計(jì)前——需求分析

1.最小化思考負(fù)擔(dān)：在UI設(shè)計(jì)進(jìn)行之前，要求學(xué)生從用戶需求分析進(jìn)行切入，不管是整個(gè)界面的設(shè)計(jì)還是單個(gè)圖標(biāo)的設(shè)計(jì)。在設(shè)計(jì)用戶界面的時(shí)候，設(shè)計(jì)師不得不考慮人類大腦處理信息的限度。美國交互設(shè)計(jì)師克魯格在《Don't make me think》一書中指出用戶瀏覽界面信息與閱讀書籍是完全不一樣的，而用戶選擇瀏覽界面信息往往是為了“偷懶”，不希望有任何思考負(fù)擔(dān)。他給出一個(gè)非常重要的原則就是“不要讓用戶思考”，也是可用性第一定律[2]。如果忽視這一原則，會引起許多困惑，以2017年學(xué)生設(shè)計(jì)的APP作業(yè)《吃啥看我》為例，界面中采用了非常繁雜的字體，需要用戶多看幾次才能辨別。

為減少困惑的發(fā)生，請將界面的任何一個(gè)部分的設(shè)計(jì)都圍繞著這一定律來設(shè)計(jì)。這一原則甚至比功能的全面性和完整性還要重要，旨在盡力避免讓用戶在瀏覽界面時(shí)產(chǎn)生疑惑，讓用戶能夠清晰明白界面上的每一個(gè)元素的功能，同時(shí)也能夠巧妙地將用戶引導(dǎo)到他們想要去的界面，讓用戶無需思考就可以對界面進(jìn)行流暢操作。

2.滿足用戶習(xí)慣與需求：當(dāng)學(xué)生繼續(xù)思考用戶習(xí)慣與需求，會發(fā)現(xiàn)呈現(xiàn)的數(shù)據(jù)無從著手分析深入。豐田創(chuàng)始人豐田佐吉提出的5W日丫分析法在交互思維式UI設(shè)計(jì)課程中可以幫助困惑的學(xué)生從問題中抽絲剝繭出來，層層推導(dǎo)問題本質(zhì)、還原問題場景，將設(shè)計(jì)師自身深度帶入用戶角色中去感受問題，進(jìn)而找到解決問題的思路。根據(jù)該方法需要分析產(chǎn)品背景、目標(biāo)人群、預(yù)期目標(biāo)、使用場景、需求節(jié)點(diǎn)與如何驗(yàn)證。

以本校2017屆優(yōu)秀畢業(yè)生作品《移動(dòng)醫(yī)療孕期助手——孕期寶APP設(shè)計(jì)》為例所做的需求分析報(bào)告，作者深入用戶角色體會用戶心理、生理特征以及需求習(xí)慣，設(shè)計(jì)初期采用調(diào)查問卷與實(shí)地采訪的方式獲取研究數(shù)據(jù)，通過5wny分析法給出圖表結(jié)論，分析繪制曲線圖、柱狀圖和餅狀圖等來表現(xiàn)研究對象年齡特征（認(rèn)知習(xí)慣、操作習(xí)慣和興趣特征等）和社會背景等。交互思維式UI設(shè)計(jì)課程的教學(xué)模塊中要求學(xué)生應(yīng)在這個(gè)基礎(chǔ)之上更進(jìn)一步，將界面中每一個(gè)元素和角色都進(jìn)行5wny分析，考慮各方訴求，整合起來進(jìn)行分析，設(shè)計(jì)出最優(yōu)化資源的方案。

（二）模塊二：設(shè)計(jì)中一一美化界面提升細(xì)節(jié)

如今同類型產(chǎn)品在功能、服務(wù)和內(nèi)容都日趨相近，產(chǎn)品之間的差異取決于設(shè)計(jì)。設(shè)計(jì)決定產(chǎn)品在用戶心目的位置、好的設(shè)計(jì)會為產(chǎn)品增值。設(shè)計(jì)時(shí)要從整體界面的設(shè)計(jì)來進(jìn)行考慮更要以功能性為導(dǎo)向，了解設(shè)計(jì)趨勢，預(yù)測用戶行為，提升產(chǎn)品的精細(xì)度、設(shè)計(jì)的規(guī)范和視覺可用性。而設(shè)計(jì)規(guī)范是學(xué)生經(jīng)常忽略的部分，交互思維主要從查閱便捷、統(tǒng)一輸出和美化細(xì)節(jié)這三方面來實(shí)現(xiàn)。

1.簡易性：UI設(shè)計(jì)是人與計(jì)算機(jī)之間進(jìn)行視覺表現(xiàn)傳達(dá)，設(shè)計(jì)出來的信息要方便人們?nèi)ソ邮蘸吞幚韀3]?？唆敻裾J(rèn)為想要評估界面設(shè)計(jì)中的交互思維，主要的方法是考察用戶操作界面時(shí)的易用性[4]，這是為了提高用戶的使用率，并減少錯(cuò)誤點(diǎn)擊的可能性。學(xué)生在面對眾多界面功能及元素時(shí)，需要思考清楚用戶真正需要的功能，適當(dāng)做減法或留白，簡單直觀地將程序本身的功能進(jìn)行展現(xiàn)。

2.一致性：遵循視覺統(tǒng)一性是界面設(shè)計(jì)上是至關(guān)重要的，導(dǎo)航欄、圖標(biāo)、文字、圖片、標(biāo)簽……都應(yīng)在視覺上呈現(xiàn)元素一致性。視覺風(fēng)格一致同樣也意味著用戶操作的一致性，交互便捷也由此體現(xiàn)。學(xué)生作品“匯創(chuàng)青春”數(shù)字交互類二等獎(jiǎng)《氣候預(yù)言家APP設(shè)計(jì)》（圖1）為用戶呈現(xiàn)一個(gè)統(tǒng)一風(fēng)格的界面，該設(shè)計(jì)在色彩的純度和明度上都保持接近一致，線寬度、體積感、外輪廓和透視上也都保持一致性。因此，要求學(xué)生在設(shè)計(jì)時(shí)應(yīng)完善好圖標(biāo)、文字、控件、組件等細(xì)節(jié)，把握好色彩、外觀和材質(zhì)等，并通過利用相同元素自由組合的方法來統(tǒng)一視覺風(fēng)格，包括配色協(xié)調(diào)統(tǒng)一。

3.布局清楚有序原則：在進(jìn)行界面設(shè)計(jì)時(shí)，柵格系統(tǒng)常常被學(xué)生忽視，比如不少初學(xué)者在一開始設(shè)計(jì)移動(dòng)端UI時(shí)趨向于把網(wǎng)頁設(shè)計(jì)的內(nèi)容直接硬搬到手機(jī)端界面，引起瀏覽不適。因此，站在用戶瀏覽角度和交互簡易性，柵格系統(tǒng)應(yīng)被重視，這可以幫助初學(xué)者解決在界面排版布局上的許多問題。柵格系統(tǒng)即網(wǎng)格，可以讓頁面富有統(tǒng)一的秩序感和韻律，讓界面表現(xiàn)出統(tǒng)一性和一致性，且顯得更加專業(yè)、系統(tǒng)化和高效性。與此同時(shí)，還要留意UI設(shè)計(jì)的設(shè)計(jì)趨勢和視覺可用性。遵循不同系統(tǒng)平臺（IOS系統(tǒng)和Android系統(tǒng)）下的設(shè)計(jì)規(guī)范和配色原則，例如Material Design。它是由谷歌公司“為不同平臺設(shè)計(jì)一致廣泛的感覺”推出的一種設(shè)計(jì)語言，知乎和印象筆記等產(chǎn)品也是采用了這類設(shè)計(jì)方式。這意味著行業(yè)趨于符合規(guī)范的設(shè)計(jì)，為用戶提供更好的視覺體驗(yàn)和交互體驗(yàn)，統(tǒng)一外觀、減少開發(fā)難度和交互操作步驟。

因此，在本課程模塊當(dāng)中要求學(xué)生遵從設(shè)計(jì)規(guī)范，從尺寸、表意、交互清晰和形式服從功能入手，減少視覺點(diǎn)綴，確保內(nèi)容突出，幫助用戶更快做出選擇，還要把握動(dòng)效傳達(dá)深度與層次順序展示[5]。

（三）模塊三：設(shè)計(jì)后一一設(shè)計(jì)驗(yàn)證

由于學(xué)生較難做到通過大數(shù)據(jù)的反饋來對自己的作品進(jìn)行驗(yàn)證，但仍要求樹立正確的動(dòng)效交互思維來驗(yàn)證自己的作品。動(dòng)效可以根據(jù)需求分為功能型動(dòng)效和魅力型動(dòng)效。功能型動(dòng)效主要指的是頁面空間轉(zhuǎn)換和用戶視覺信息反饋，可以幫助用戶對界面使用的理解。魅力型動(dòng)效代表了品牌與趣味，可以幫助產(chǎn)品運(yùn)營和烘托氛圍，給用戶制造驚喜和愉悅感[6]。動(dòng)效的設(shè)計(jì)不拘泥于單一的界面元素，學(xué)生在制作動(dòng)效的時(shí)候需要展現(xiàn)出用戶能夠靈活自如地操作程序、應(yīng)用功能。

1.交互勝、靈活性：隨著設(shè)計(jì)方案不斷深入與完善，如何展示如何操作？依據(jù)模塊一和模塊二的設(shè)計(jì)思路可以通過動(dòng)效很好地體現(xiàn)UI設(shè)計(jì)的交互性。例如，Material Design中懸浮球FAB是可交互幫助跳轉(zhuǎn)各種功能。一個(gè)優(yōu)秀的動(dòng)效可以引導(dǎo)視圖焦點(diǎn)、提示用戶操作、提供清晰的元素層級與空間關(guān)系、建立情感設(shè)計(jì)、突出產(chǎn)品個(gè)性，幫助用戶理解產(chǎn)品，降低使用門檻。要求學(xué)生盡可能地展現(xiàn)出符合力學(xué)運(yùn)動(dòng)原理的動(dòng)效效果。用戶才能根據(jù)平時(shí)所觀察到的運(yùn)動(dòng)原理，認(rèn)識與梳理好界面層次邏輯，了解產(chǎn)品功能。同時(shí)，還要求動(dòng)效設(shè)計(jì)模擬現(xiàn)實(shí)事物中的材質(zhì)，包括質(zhì)量、彈性等。[7]

2.人性化：除此之外，動(dòng)效同樣要求學(xué)生考慮每個(gè)部件的背景（部件定義、競品分析、行業(yè)資料）、用戶年齡和性別、操作習(xí)慣、認(rèn)知習(xí)慣、興趣特征或心理特征。盡可能地提高用戶滿意度和情感體驗(yàn)，帶給用戶友好、愉悅的感受，這也是人性化的體現(xiàn)，比如Readme的登入界面在用戶輸入密碼時(shí)會有一只可愛的貓頭鷹遮住自己的眼睛。這樣的動(dòng)效無疑是加分項(xiàng)。

從上述三個(gè)模塊可以認(rèn)識到，為構(gòu)成交互思維式系統(tǒng)化的應(yīng)用型高校UI設(shè)計(jì)課程，在本來所具備的知識體系上加入三個(gè)模塊系統(tǒng)化地應(yīng)用，推進(jìn)整個(gè)課程有條不紊地開展，提升初學(xué)者對UI設(shè)計(jì)的多維度思考能力解決更多問題。

結(jié)語

綜上，在全鏈路設(shè)計(jì)行業(yè)背景下，交互式思維在U}界面設(shè)計(jì)課程中應(yīng)得到全面應(yīng)用，滲透到UI設(shè)計(jì)的各個(gè)環(huán)節(jié)之中，展現(xiàn)出更多的優(yōu)秀學(xué)生作品。根據(jù)本文提供的符合設(shè)計(jì)原則和當(dāng)前行業(yè)背景的課程模塊將提供的方式方法，讓高校學(xué)生所學(xué)課程內(nèi)容在畢業(yè)后也能與工作崗位得到更好的匹配。

參考文獻(xiàn)

[1]Jon Kolko.交互設(shè)計(jì)沉思錄[M].北京：機(jī)械工業(yè)出版社，2013：Ⅶ.

[2]Steve Krug.Don't Make Me Think[M].北京：機(jī)械工業(yè)出版社，2006.2-11.

[3]王鶴.UI設(shè)計(jì)中用戶交互體驗(yàn)的視覺思維探究[J].科技經(jīng)濟(jì)導(dǎo)刊.2016.11：45.

[4]Jon Kolko交互設(shè)計(jì)沉思錄[M].北京：機(jī)械工業(yè)出版社，2013：XI.

[5]倪偉俊.用戶行為習(xí)慣在UI設(shè)計(jì)中的應(yīng)用[D].天津：天津師范大學(xué).2016.9-26.

[6]廖國良.UI設(shè)計(jì)中用戶交互體驗(yàn)的視覺思維分析及探討[J].佳術(shù)斯職業(yè)學(xué)院學(xué).2016.168（11）：494-496.

[7]余曉瑜.移動(dòng)智能終端中的動(dòng)效設(shè)計(jì)原則與設(shè)計(jì)方法[J].工業(yè)設(shè)計(jì)研究.2018.6：426-431.