交互設(shè)計(jì) |《匠心體驗(yàn)》

《匠心體驗(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)航傻傻分不清。

圖1.jpg

界面元素可進(jìn)行組合成為模塊啤月。我能想到的有導(dǎo)航煮仇。導(dǎo)航有直接導(dǎo)航、漢堡導(dǎo)航等谎仲。但有時(shí)浙垫,也要想著避免和簡化導(dǎo)航。

平板 App:Monoprix Courses

圖2.jpg

一個(gè)反例:達(dá)美樂披薩 App
首頁只有導(dǎo)航郑诺,迫使用戶必須從一個(gè)選項(xiàng)開始夹姥。

圖2-2.jpg

硬件交互元素

分為手勢和傳感器。

手勢

最適宜的用法:符合語義學(xué)含義(如滑動(dòng)移除)

特點(diǎn):

  • 可發(fā)現(xiàn)性低
  • 容易忘記

因此最好應(yīng)用于最重要间景、高頻功能佃声,便于用戶習(xí)得艺智。

一個(gè)矛盾需要權(quán)衡:慣用手勢的語義學(xué)含義最重要功能矛盾

Instagram:

圖3.jpg

傳感器(運(yùn)動(dòng)倘要、位置、環(huán)境等)

最適宜的用法:符合語義學(xué)含義

Boggle:

圖4.jpg

Google Translate:

圖4-1.jpg

搖一搖的壞處:

  • 誤操作
  • 手機(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:

圖5.jpg
  • 露出一截的暗示(露出下一個(gè)產(chǎn)品/信息的部分)
  • 顯示在背景的暗示

Houzz:暗示從第二張照片開始消失。

圖5-1.jpg

用戶灰粮、場景

同樣的功能仔涩,在設(shè)計(jì)時(shí)需要考慮不同的用戶、用戶在不同時(shí)間點(diǎn)的操作粘舟。不同的場景熔脂。

用戶的操作

剛剛進(jìn)行的操作 vs 用戶的目標(biāo)

我們在設(shè)計(jì)時(shí)要去滿足用戶的目標(biāo)、需求柑肴,也要考慮用戶在不同時(shí)間歷程上的操作霞揉。例如剛剛進(jìn)行的操作,需要設(shè)計(jì)反饋晰骑。

世界報(bào):

圖6.jpg

滿足需求的操作 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:

圖7.jpg

不要做:

  • 啟動(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ū)域:

圖8.jpg

但也要考慮對效率的追求裹纳,是否傷害了用戶價(jià)值择葡。

Messages:

圖9.jpg

保護(hù)用戶 vs 打擾用戶

例如有些刪除操作,為了避免誤操作剃氧,而設(shè)置的過于冗長敏储。
再如,我們需要給予反饋朋鞍,而不是強(qiáng)迫確認(rèn)已添。

Allocine:


圖10.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市番舆,隨后出現(xiàn)的幾起案子酝碳,更是在濱河造成了極大的恐慌矾踱,老刑警劉巖恨狈,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異呛讲,居然都是意外死亡禾怠,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進(jìn)店門贝搁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吗氏,“玉大人,你說我怎么就攤上這事雷逆∠曳恚” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵膀哲,是天一觀的道長往产。 經(jīng)常有香客問我,道長某宪,這世上最難降的妖魔是什么仿村? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮兴喂,結(jié)果婚禮上蔼囊,老公的妹妹穿的比我還像新娘焚志。我一直安慰自己,他們只是感情好畏鼓,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布酱酬。 她就那樣靜靜地躺著,像睡著了一般云矫。 火紅的嫁衣襯著肌膚如雪岳悟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天泼差,我揣著相機(jī)與錄音贵少,去河邊找鬼。 笑死堆缘,一個(gè)胖子當(dāng)著我的面吹牛滔灶,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播吼肥,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼录平,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了缀皱?” 一聲冷哼從身側(cè)響起斗这,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎啤斗,沒想到半個(gè)月后表箭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡钮莲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年免钻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片崔拥。...
    茶點(diǎn)故事閱讀 40,115評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡极舔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出链瓦,到底是詐尸還是另有隱情拆魏,我是刑警寧澤,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布慈俯,位于F島的核電站渤刃,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏肥卡。R本人自食惡果不足惜溪掀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望步鉴。 院中可真熱鬧揪胃,春花似錦璃哟、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至骚勘,卻和暖如春铐伴,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背俏讹。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工当宴, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人泽疆。 一個(gè)月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓户矢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親殉疼。 傳聞我的和親對象是個(gè)殘疾皇子梯浪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評論 2 355