《匠心體驗(yàn)》是一本不錯(cuò)的案例集,我試著提煉一些交互設(shè)計(jì)框架。
交互展示
從元素的形式宙址、內(nèi)容和呈現(xiàn)方式三個(gè)方面來看。
元素的形式
我把它分為界面元素和硬件交互元素调卑。
界面元素
界面元素有按鈕抡砂、輸入框、圖片等恬涧。元素的基本屬性有點(diǎn)擊態(tài)注益、可供性等。
可供性具體不解釋了溯捆。要注意:
- 有些元素有自然可供性(如圖片丑搔,一些產(chǎn)品圖片等很容易被認(rèn)為可點(diǎn)擊)
- 要正確表達(dá)
- 無可供性時(shí)可制造
沒有正確表達(dá)可供性:圖片、導(dǎo)航傻傻分不清。
界面元素可進(jìn)行組合成為模塊啤月。我能想到的有導(dǎo)航煮仇。導(dǎo)航有直接導(dǎo)航、漢堡導(dǎo)航等谎仲。但有時(shí)浙垫,也要想著避免和簡化導(dǎo)航。
平板 App:Monoprix Courses
一個(gè)反例:達(dá)美樂披薩 App
首頁只有導(dǎo)航郑诺,迫使用戶必須從一個(gè)選項(xiàng)開始夹姥。
硬件交互元素
分為手勢和傳感器。
手勢
最適宜的用法:符合語義學(xué)含義(如滑動(dòng)移除)
特點(diǎn):
- 可發(fā)現(xiàn)性低
- 容易忘記
因此最好應(yīng)用于最重要间景、高頻功能佃声,便于用戶習(xí)得艺智。
一個(gè)矛盾需要權(quán)衡:慣用手勢的語義學(xué)含義和最重要功能矛盾
Instagram:
傳感器(運(yùn)動(dòng)倘要、位置、環(huán)境等)
最適宜的用法:符合語義學(xué)含義
Boggle:
Google Translate:
搖一搖的壞處:
- 誤操作
- 手機(jī)越來越重
最好應(yīng)用于最重要十拣、高頻功能封拧,便于用戶習(xí)得。
總結(jié)一下夭问,元素的兩種分類方式:
界面/硬件交互
單一元素/組合
元素的內(nèi)容
信息/數(shù)據(jù)
設(shè)計(jì)時(shí)注意考慮:
- 突出性
- 簡潔性
元素的呈現(xiàn)方式
包括布局方式(空間上)泽西、出現(xiàn)順序(時(shí)間上)
主要找到的呈現(xiàn)方式有強(qiáng)化和暗示。
強(qiáng)化
- 聲音
- 動(dòng)畫
- 文字說明
- 對比色
這里也有一個(gè)矛盾需要權(quán)衡缰趋。即強(qiáng)化 vs 入侵性捧杉。有強(qiáng)化作用的,往往入侵性更強(qiáng)秘血,可能并不友好味抖。
暗示
- 語義學(xué)暗示(動(dòng)畫)
雜志 Courrier International:
- 露出一截的暗示(露出下一個(gè)產(chǎn)品/信息的部分)
- 顯示在背景的暗示
Houzz:暗示從第二張照片開始消失。
用戶灰粮、場景
同樣的功能仔涩,在設(shè)計(jì)時(shí)需要考慮不同的用戶、用戶在不同時(shí)間點(diǎn)的操作粘舟。不同的場景熔脂。
用戶的操作
剛剛進(jìn)行的操作 vs 用戶的目標(biāo)
我們在設(shè)計(jì)時(shí)要去滿足用戶的目標(biāo)、需求柑肴,也要考慮用戶在不同時(shí)間歷程上的操作霞揉。例如剛剛進(jìn)行的操作,需要設(shè)計(jì)反饋晰骑。
世界報(bào):
滿足需求的操作 vs 鼓勵(lì)用戶進(jìn)行的操作
有些考慮如何滿足需求适秩,而有些時(shí)候,考慮如何在沒有需求時(shí)鼓勵(lì)用戶操作。
用戶的分類
第一次隶症,很多次
很少用政模,經(jīng)常用
新手、中間蚂会、專家
這些都會(huì)影響交互的設(shè)計(jì)淋样。
場景的分類
正向場景 vs 約束場景
約束場景有:等待、報(bào)錯(cuò)/異常胁住、廣告
重點(diǎn)聊一下等待趁猴。
實(shí)際等待時(shí)間 vs 感受等待時(shí)間
這個(gè)概念挺重要,我們可以通過設(shè)計(jì)降低用戶感受的等待時(shí)間彪见。
什么時(shí)候等待時(shí)間會(huì)格外漫長呢儡司?
- 搜尋重大、敏感的信息時(shí):閱讀戀人的回信余指、打開重要文件等捕犬。
- 任務(wù)本身具有時(shí)間壓力,活動(dòng)具有時(shí)間限制:為持續(xù)時(shí)間短的場景拍攝照片酵镜、錄制聲音碉碉、記下掠過心頭卻又容易忘記的想法。
- 使用環(huán)境壓力大:尤其在戶外淮韭,或環(huán)境不夠安全垢粮,或希望保持一定私密性,如在課堂上靠粪、餐桌上蜡吧、開會(huì)時(shí)。
那么可以做些什么呢占键?
- 預(yù)加載
- 展示進(jìn)程
- 適應(yīng) app 的: 游戲類加載時(shí)顯示 tips / 新聞?lì)惣虞d時(shí)顯示警句
Yummly:
不要做:
- 啟動(dòng)畫面(啟動(dòng)畫面像擋在用戶面前的一堵高墻)
- 啟動(dòng)畫面+游戲
- 啟動(dòng)畫面+廣告
原則(認(rèn)知)
這里介紹一些設(shè)計(jì)時(shí)的原則昔善,或者在設(shè)計(jì)時(shí)需要平衡的部分,偏認(rèn)知層面考量捞慌。
限制(用戶感受到的)時(shí)間堆積
比如點(diǎn)擊后如果去到不同頁面會(huì)讓用戶覺得漫長耀鸦、乏味。
可以做浮層啸澡,在背景中暗示用戶可以隨時(shí)回到原來界面袖订。
我們甚至可以假設(shè),用戶可能敢冒更大風(fēng)險(xiǎn)去瀏覽自己可能不喜歡的內(nèi)容嗅虏,因?yàn)樗婪祷卦瓉眄撁婊蛉ネ渌撁娴牟僮魇直憬荨?/p>
要說明洛姑、引導(dǎo) vs 沒人看說明,要一用就會(huì)
前者如有些 icon 不如文字+ icon皮服。有些手勢需要解釋楞艾。
這里的原則是在保證用戶理解度参咙、無歧義的基礎(chǔ)上盡可能減少認(rèn)知負(fù)擔(dān)。
簡潔 vs 不完整硫眯、受限制蕴侧、貧乏
追求簡潔,但不可以后者两入。
效率 vs 價(jià)值
提高效率的方式:
- 快捷方式
- 簡化數(shù)據(jù)輸入
- 減少步驟
- 利用硬件交互元素(掃碼識(shí)別卡號(hào)净宵,代替輸入)
- 擴(kuò)大可觸控區(qū)域
- 尊重習(xí)慣:慣用的圖標(biāo)、手勢
擴(kuò)大可觸控區(qū)域:
但也要考慮對效率的追求裹纳,是否傷害了用戶價(jià)值择葡。
Messages:
保護(hù)用戶 vs 打擾用戶
例如有些刪除操作,為了避免誤操作剃氧,而設(shè)置的過于冗長敏储。
再如,我們需要給予反饋朋鞍,而不是強(qiáng)迫確認(rèn)已添。
Allocine: