設(shè)計說五分鐘了解交互設(shè)計

1、超 哥0202_基礎(chǔ)理論五分鐘交互設(shè)計 特別節(jié)目12圖形設(shè)計圖形用戶界面設(shè)計GUI(graphic user interface)design上節(jié)課我們講的是3圖形設(shè)計交互設(shè)計(Interaction design)交互設(shè)計這節(jié)課給大家?guī)斫换ピO(shè)計感性形式4交互設(shè)計理性功能交互設(shè)計圖形設(shè)計UI設(shè)計(User interface design)UI 設(shè)計為什么要有理性的交互設(shè)計？2010年左右，炫酷寫實的設(shè)計成為了潮流、但這正是用戶所需要的嗎？5此設(shè)計來自網(wǎng)絡(luò)，鳴謝67此設(shè)計來自網(wǎng)絡(luò)，鳴謝8QQ音樂UI 實際上這些炫酷寫實的界面帶給用戶的并不是更加優(yōu)質(zhì)的體驗，而是增加了學(xué)習(xí)成本，和開發(fā)者的效率

2、把這些寫實的改變?yōu)楦柙~或者英文翻譯才是用戶更加需要的用戶更需要解決實際問題的設(shè)計910當(dāng)今UI設(shè)計師的能力要求Graphic design感性設(shè)計形式感平面構(gòu)成色彩構(gòu)成圖形Interaction design理性設(shè)計樹狀圖需求分析流程圖交互交互設(shè)計做什么？11產(chǎn)品UI 架構(gòu)設(shè)計Interaction Design1213百度視頻MY APP電視劇TV play下載Download電影Film分類查找Classification綜藝Variety show搜索Search猜你喜歡Guess you 個人中心Personal Center排行榜Ranking List發(fā)現(xiàn)Discover達(dá)人推薦P

3、eople recommend播放器player短視頻Short video游戲Game Center產(chǎn)品架構(gòu)圖繪制樹狀圖14百度視頻MY APP熱門HOT功能Funtion電視劇TV play下載Download電影Film分類查找Classification綜藝Variety show搜索Search猜你喜歡Guess you 個人中心Personal Center排行榜Ranking List發(fā)現(xiàn)Discover達(dá)人推薦People recommend播放器player短視頻Short video游戲Game Center產(chǎn)品架構(gòu)圖繪制樹狀圖15模塊 細(xì)節(jié)功能細(xì)節(jié)圖繪制魚骨圖UI 風(fēng)格設(shè)

4、計（UI style）Interaction Design1617此設(shè)計來自網(wǎng)絡(luò)，鳴謝18此設(shè)計來自網(wǎng)絡(luò)，鳴謝19此設(shè)計來自網(wǎng)絡(luò)，鳴謝20此設(shè)計來自網(wǎng)絡(luò)，鳴謝2122UI 框架選擇Interaction Design下面給大家講解一下APP框架的知識23極簡式（單一內(nèi)容）優(yōu)點:1、操作簡單明確，無需思考2、更容易接受和上手24翻頁式（多頁內(nèi)容）優(yōu)點:1、單頁面內(nèi)容整體性強(qiáng)2、線性瀏覽方式有方向感缺點:1、不適合展示過多頁面2、只能順序查看相應(yīng)頁面3、后面內(nèi)容無預(yù)知，且容易忽略。25宮格式（較多入口）優(yōu)點:1、清晰展現(xiàn)各入口2、容易記住各入口位置，方便快速找到用戶操作更便捷缺點:1、無法在多入口

5、間靈活跳轉(zhuǎn)，不適合任務(wù)操作2、容易形成更深的路徑3.數(shù)量有限，翻頁展現(xiàn)率太低26上導(dǎo)航優(yōu)點:1、架構(gòu)簡單輕便，配合手勢切換方便2、標(biāo)簽入口一目了然，無需跳轉(zhuǎn)頁面（感官）3、對垂直向下瀏覽任務(wù)不割裂缺點:1、頂部區(qū)域有限，相比底部需要更小的空間2、點擊區(qū)域高度較小，且不方便單手點擊3、手勢只能挨個滑動操作27下導(dǎo)航（4-5大類分支內(nèi)容）優(yōu)點:入口內(nèi)容一目了然各入口間頻繁跳轉(zhuǎn)不會迷失缺點:繁重，割裂標(biāo)簽首頁瀏覽28舵式優(yōu)點:突出重要且操作頻繁的入口，用戶操作更便捷缺點:同標(biāo)簽式，標(biāo)簽個數(shù)有一定的限制29抽屜側(cè)邊欄（1個重點其它次要內(nèi)容）優(yōu)點:1、節(jié)省頁面空間，突出主要頁面，使用戶聚焦2、弱化隱藏必

6、不可少但不常用信息缺點:1、適用范圍小：不需要頻繁切換內(nèi)容的應(yīng)用2、抽屜中入口隱蔽，切換成本太大3、文案表意務(wù)必要清晰30隱藏式優(yōu)點:1、靈活2、展示方式有意思（path）3、擴(kuò)展更多的功能和入口缺點:1、入口隱藏必須喚起2、對入口功能的可見性要求高缺點：1、不適合展示過多頁面2、不能跳躍性地查看間隔的頁面，只能按順序查 看相鄰的頁面3、由于各頁面內(nèi)容結(jié)構(gòu)相似，容易忽略后面的內(nèi)容3132線框原型圖產(chǎn)品線框圖原型簡單快捷的構(gòu)建產(chǎn)品框架原型，用于快速實驗想法和快速修改迭代，最終成型的線框圖原型將用于全員討論及視覺稿設(shè)計的基礎(chǔ)。實際工作中，交互設(shè)計師大多是在畫原型圖下面帶大家學(xué)習(xí)一下優(yōu)秀的線框原型圖

7、33此圖來自網(wǎng)絡(luò)，鳴謝3435原型圖繪制方法1黑白灰色塊重要元素用80%黑次要元素用40%黑一般元素用60%黑其它區(qū)域用白色此圖來自網(wǎng)絡(luò)，鳴謝36原型圖繪制方法2黑白灰+高保真圖形重要元素用80%黑圖形文字均采用高保真形態(tài)（去色）其它區(qū)域用白色米色重要元素用60%黑此圖來自網(wǎng)絡(luò)，鳴謝37原型圖繪制方法3黑白灰突出色高保真圖形重要元素用突出色彩表達(dá)次要元素用40%黑全部圖形采用高保真模擬黑色襯底突出原型此圖來自網(wǎng)絡(luò)，鳴謝此圖來自網(wǎng)絡(luò)，鳴謝3839此圖來自網(wǎng)絡(luò)，鳴謝40此圖來自網(wǎng)絡(luò)，鳴謝41交互流程圖繪制交互流程圖繪制交互設(shè)計是面向過程的設(shè)計，所以需要描述清楚產(chǎn)品整體使用流程及相應(yīng)的情況。使用交互

8、文檔進(jìn)行描述是很好的方式，交互文檔將作為技術(shù)開發(fā)，測試及設(shè)計人員進(jìn)行全面的界面設(shè)計的依據(jù)。42Step1: 整體編號流程細(xì)節(jié)對模塊進(jìn)行編號底部對界面信息及要點進(jìn)行說明細(xì)節(jié)說明流程進(jìn)行用線連接標(biāo)題局部功能流程Step2:局部功能流程說明點擊后流程進(jìn)行示意細(xì)節(jié)說明示意4344細(xì)節(jié)放大圖多情況狀態(tài)圖界面信息說明Step3:多情況多狀態(tài)說明45動態(tài)交互原型設(shè)計為了更好的將產(chǎn)品的動態(tài)展示給Boss或者其它相關(guān)團(tuán)隊成員，可以用最簡單的方式進(jìn)行動畫演示，讓成員可以更快更好的理解產(chǎn)品的使用。表示包含關(guān)系點擊彈出按鈕46吸引用戶注意文字閃爍效果47百度傳課百度UE講堂上面只是簡單的給大家講解一下交互設(shè)計，要向更深入學(xué)習(xí)，可以看這幾節(jié)課48可用性測試、易用性評估、用戶反饋、問卷調(diào)研等用戶研究UER49用戶界面UI設(shè)計師 用戶界面（User interface ）設(shè)計（design），簡稱UI。它是指產(chǎn)品的視覺美觀、人機(jī)交互邏輯