UI設計課程中交互思維的分析與探究

陳心雨

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

關鍵詞：交互思維 UI設計課程 用戶體驗 全鏈路設計

中圖分類號：J524 文獻標識碼：A

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

一、前言

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

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

以交互思維在UI設計課程中的應用為切入點，引領設計初學者進入學習領域，緊貼行業要求，重新構建高校應用型課程系統化的教學模塊，為未來UI行業發展理論基礎和教學實踐提供新的理念與參考。

二、構建交互思維式UI設計課程的教學模塊

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

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

（一）模塊一：設計前——需求分析

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

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

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

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

（二）模塊二：設計中一一美化界面提升細節

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

1.簡易性：UI設計是人與計算機之間進行視覺表現傳達，設計出來的信息要方便人們去接收和處理[3]。克魯格認為想要評估界面設計中的交互思維，主要的方法是考察用戶操作界面時的易用性[4]，這是為了提高用戶的使用率，并減少錯誤點擊的可能性。學生在面對眾多界面功能及元素時，需要思考清楚用戶真正需要的功能，適當做減法或留白，簡單直觀地將程序本身的功能進行展現。

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

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

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

（三）模塊三：設計后一一設計驗證

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

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

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

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

結語

綜上，在全鏈路設計行業背景下，交互式思維在U}界面設計課程中應得到全面應用，滲透到UI設計的各個環節之中，展現出更多的優秀學生作品。根據本文提供的符合設計原則和當前行業背景的課程模塊將提供的方式方法，讓高校學生所學課程內容在畢業后也能與工作崗位得到更好的匹配。

參考文獻

[1]Jon Kolko.交互設計沉思錄[M].北京：機械工業出版社，2013：Ⅶ.

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

[3]王鶴.UI設計中用戶交互體驗的視覺思維探究[J].科技經濟導刊.2016.11：45.

[4]Jon Kolko交互設計沉思錄[M].北京：機械工業出版社，2013：XI.

[5]倪偉俊.用戶行為習慣在UI設計中的應用[D].天津：天津師范大學.2016.9-26.

[6]廖國良.UI設計中用戶交互體驗的視覺思維分析及探討[J].佳術斯職業學院學.2016.168（11）：494-496.

[7]余曉瑜.移動智能終端中的動效設計原則與設計方法[J].工業設計研究.2018.6：426-431.