火星網(wǎng)校
學(xué)交互設(shè)計要懂什么:交互設(shè)計師的知識體系
發(fā)布時間：2024-01-18 14:42:34 瀏覽量：231次
先為大家分享交互設(shè)計金字塔知識體系：
界面基礎(chǔ)知識
界面基礎(chǔ)知識包括：控件、布局、流程，即設(shè)計稿上可見部分。
1.控件：
控件就是界面上的最小單元，如搜索框、單選按鈕、復(fù)選框、下拉框等。
認(rèn)識控件最好的方法是閱讀各個平臺的官方設(shè)計規(guī)范，比如 iOS 、Android 、MacOS 、Windows（Desktop APP / UWP）、小程序設(shè)計規(guī)范。web 端沒有官方規(guī)范，國內(nèi)后臺規(guī)范常見的是 antdesign 和 element ，前臺規(guī)范基本沒有。
控件交互
控件有其自身的交互過程，如：用戶點擊文本框，出現(xiàn)光標(biāo)，彈出鍵盤。輸入第一個字符后出現(xiàn)“清空按鈕”。輸入多個字符后有截斷效果。輸入錯誤時報錯。
了解控件交互流程能夠更細(xì)致的了解控件。交互稿繪制時，也會細(xì)致描述某個控件的交互流程。
控件屬性
控件都有自己的屬性，即可設(shè)置的參數(shù)。如列表控件的屬性有：排序規(guī)則、加載規(guī)則、刷新規(guī)則、適配規(guī)則、截斷規(guī)則等。
圖中的群成員列表，排序規(guī)則可以按照昵稱首字母排也可以按照進(jìn)群先后順序排列。
2. 布局
布局就是把控件和內(nèi)容放到界面上合適的位置并給與合適的視覺優(yōu)先級。布局設(shè)計的基本理論有：
格式塔原理
網(wǎng)格系統(tǒng)
7±2 法則
席克定律
費茨定律
奧卡姆剃刀原理
復(fù)雜性守恒定律。
布局設(shè)計可以要注意以下4個步驟：
列舉：將界面中需要的元素列舉出來，比如：商品圖片、商品標(biāo)題、價格、優(yōu)惠券、收藏、分享…
歸類：將所有元素歸類，每一類一個模塊，如：收藏、購買、加入購物車，歸為操作模塊。
排序：將歸類好的模塊排序，排序依據(jù)要注意：用戶在場景中的瀏覽順序、元素的重要性、業(yè)務(wù)期望。
調(diào)整：綜合其他因素對布局進(jìn)行調(diào)整。并對各元素的視覺重量進(jìn)行定義調(diào)整。
3. 流程
界面元素有 2 種：內(nèi)容和功能。如商品描述是一種內(nèi)容，加入購物車是一個功能。在交互稿中，展示功能的方式通過描述交互流程來說明。如在聊天 APP 中接收文件的交互流程：
點開消息→看到文件→點擊下載→下載完成并打開
流程設(shè)計可以按照以下3個活動去完成：
1．確定任務(wù)
2．任務(wù)拆解動作
3．動作對應(yīng)界面
設(shè)計用戶需求
設(shè)計師在設(shè)計過程中應(yīng)站在用戶的角度思考，而用戶角度包括了三個要素：用戶、目標(biāo)、場景。
1. 用戶
用戶概念好理解但難了解。工作中最基礎(chǔ)的用戶調(diào)研方法是：用戶訪談、用戶觀察、問卷。
通過這些方法可以收集到用戶的基本信息，對其進(jìn)行分類確定定用戶畫像。用戶畫像是將一群人抽象為一個人。要制定用戶畫像，是為了設(shè)計方便。
2. 目標(biāo)
目標(biāo)會影響設(shè)計，同樣是社交APP，微信和釘釘?shù)脑O(shè)計差異很大，微信是輕打擾設(shè)計，而釘釘則是重打擾。這和兩個產(chǎn)品的目標(biāo)有密切的關(guān)系。
在交互設(shè)計的體系中，目標(biāo)可以細(xì)分為多種目標(biāo)，設(shè)計師不僅要為用戶服務(wù)，也要為業(yè)務(wù)服務(wù)。
3. 場景
場景可以理解為用戶當(dāng)時所處的狀況，場景幫助產(chǎn)品經(jīng)理去理解用戶需求。設(shè)計者把自己代入到場景中，體會用戶的想法，從而得到用戶需求。
用戶場景的通用結(jié)構(gòu)是：
誰？在什么情況下？想要什么？做了什么？結(jié)果如何？他的想法如何？
例如：用戶看新聞的案例中的用戶場景。
專業(yè)能力
交互設(shè)計的專業(yè)能力包括，需要大家在每個部分堅持專研與吸收，最終成為交互設(shè)計達(dá)人：
用戶研究
競品研究
設(shè)計理論
設(shè)計方法
用戶測試
數(shù)據(jù)分析
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
10. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
最新文章
