搞砸了的設(shè)計(jì) 隨處可見(jiàn)的BAD UI

前言：歡迎來(lái)到BAD　UI的世界 ix 你有這樣的經(jīng)歷嗎？　xii 何謂UI？　xiii “我又不是設(shè)計(jì)師，跟我沒(méi)關(guān)系！”真的是這樣嗎？　xv 即使不進(jìn)行設(shè)計(jì)也有需要選擇的時(shí)候　xvii 為什么是BAD　UI？ xix 本書(shū)的結(jié)構(gòu)　xxi 第1章?線索　1 導(dǎo)致錯(cuò)誤行為的線索　2 門(mén)的線索：拉開(kāi)？推開(kāi)？　2 一樣的線索：應(yīng)該從哪邊推開(kāi)？　3 浴室的UI：要怎么放出熱水？　4 洗手池的UI：要怎么放水？　5 車(chē)票的插入口：請(qǐng)不要插入交通卡??！　6 自動(dòng)售票機(jī)的語(yǔ)言切換：要怎么切換語(yǔ)言？　7 可憐的烘手機(jī)：由于他人的行為而變成了……　9 機(jī)場(chǎng)的指示牌：3號(hào)和18號(hào)哪個(gè)更近？　10 線索過(guò)于薄弱　11 淋浴花灑和水龍頭之間的切換：要怎么從淋浴花灑放出熱水？　11 計(jì)算機(jī)的電源按鈕：要怎么啟動(dòng)？　13 無(wú)線LAN的開(kāi)/關(guān)：要怎么打開(kāi)?　15 提示頁(yè)面可以滾動(dòng)：其他信息在哪里？　16 平板電腦的操作：切換成攝像模式的方法是？　18 悲劇的咖啡機(jī)：杯子應(yīng)該放在哪里？　20 線索和標(biāo)識(shí)　21 總結(jié)　22 練習(xí)　22 第2章　反饋　23 無(wú)法傳達(dá)信息的反饋　24 自動(dòng)售票機(jī)的Error：為什么不能買(mǎi)票？　24 數(shù)碼相機(jī)的Error：為什么一張照片也保存不了？　25 Web服務(wù)的營(yíng)業(yè)時(shí)間：馬上就要到停止?fàn)I業(yè)的時(shí)間了，但是……　26 HDD錄像機(jī)的陷阱：為什么預(yù)約錄像會(huì)失敗？　27 讓人發(fā)慌的自動(dòng)取票機(jī)：不處理兩張卡！　28 自動(dòng)售票機(jī)的注意事項(xiàng)：買(mǎi)錯(cuò)票就會(huì)被罰款，但是卻……　29 iPhone的電子計(jì)算器：2500÷50＝？　30 自動(dòng)售券機(jī)上的燈：為什么會(huì)誤以為餐券都賣(mài)完了？　31 關(guān)掉聲音的按鈕：怎樣解除呼叫？　32 提示信息內(nèi)容的重要性　33 輸入格式的Error：所謂的無(wú)法識(shí)別的字符是指什么？　33 確認(rèn)類(lèi)型的提示信息：真的可以按下“OK”嗎？　35 取消按鈕的意思：“要取消嗎？”“取消/OK?”　36 店鋪門(mén)前的提示板：今天的營(yíng)業(yè)結(jié)束了？　37 信息發(fā)送錯(cuò)誤：超過(guò)字?jǐn)?shù)限制了！　37 信息傳達(dá)時(shí)機(jī)的重要性　38 惱人的ATM搜索系統(tǒng)：先選擇町再選擇丁目再選擇番地……　38 惱人的預(yù)約系統(tǒng)：滿座！滿座！那個(gè)也滿座！　40 狀態(tài)/狀況的可視化　42 暖爐的開(kāi)關(guān)：為什么會(huì)忘記關(guān)掉暖爐？　42 自動(dòng)售券機(jī)的操作順序：購(gòu)買(mǎi)拉面應(yīng)該如何操作？　44 洗手間的門(mén)鎖：上廁所時(shí)會(huì)被人看到的洗手間　46 浴室自動(dòng)放水系統(tǒng)：以為浴缸里已經(jīng)放滿水了，但是……　48 心理模型和無(wú)力感　49 總結(jié)　50 練習(xí)　50 第3章　對(duì)應(yīng)關(guān)系　51 一對(duì)一的對(duì)應(yīng)關(guān)系　52 開(kāi)關(guān)和燈之間的對(duì)應(yīng)關(guān)系：為什么會(huì)關(guān)錯(cuò)燈？　52 有難度的記憶游戲：為什么會(huì)選擇錯(cuò)誤的對(duì)象？　54 菜品和按鈕的對(duì)應(yīng)關(guān)系：那道菜對(duì)應(yīng)的是哪個(gè)按鈕？　55 外包裝和獨(dú)立包裝的對(duì)應(yīng)關(guān)系：為什么會(huì)選擇錯(cuò)誤的味道？　56 位置上的對(duì)應(yīng)關(guān)系　57 電梯和操作面板：這個(gè)操作面板是控制哪部電梯的？　57 洗手間標(biāo)識(shí)的左邊和右邊：哪個(gè)是男用哪個(gè)是女用？　58 洗手間標(biāo)識(shí)的含義：男女共用的洗手間？　60 表格里的單選按鈕：這個(gè)按鈕和哪個(gè)選項(xiàng)對(duì)應(yīng)？　61 旋轉(zhuǎn)方向上的對(duì)應(yīng)關(guān)系　62 切換開(kāi)關(guān)：為什么明明想要刷牙結(jié)果卻“洗了個(gè)澡”？　62 控制溫度的開(kāi)關(guān)：要怎么放出熱水？　64 對(duì)應(yīng)關(guān)系相關(guān)信息的缺失　65 酒店的房卡：入住的房間是幾號(hào)房？　65 外包裝和內(nèi)容的對(duì)應(yīng)關(guān)系：下一卷是哪一本呢？　66 多色圓珠筆的按鈕：哪個(gè)是紅色的呢？　67 女洗手間的指引圖：為什么要在這里提示？　68 “前注意特性”和色彩通用設(shè)計(jì)　69 總結(jié)　71 練習(xí)　71 第4章　分類(lèi)　73 哪個(gè)和哪個(gè)是一類(lèi)的？　74 讓人發(fā)愁的指引牌：洗手間在哪里？　74 自動(dòng)售券機(jī)的按鈕：選擇大碗的方法是什么？　76 公用書(shū)架：那本書(shū)在哪里？　77 根據(jù)相似點(diǎn)進(jìn)行分類(lèi)　78 電梯按鈕的排列：微笑著關(guān)上了電梯門(mén)　78 兩扇門(mén)：一扇是電梯的門(mén)，那么另一扇呢？　79 計(jì)算機(jī)主機(jī)上的按鈕：想要打開(kāi)蓋子卻讓計(jì)算機(jī)重啟了，這是為什么？　80 換乘指示：換乘地鐵的公交車(chē)站是哪個(gè)？　81 讓人不知所措的標(biāo)識(shí)：從這里開(kāi)始是自行車(chē)道/自行車(chē)道到這里結(jié)束　82 使用劃線的方式進(jìn)行分類(lèi)　83 時(shí)刻表里的組合：為什么要乘的那輛公交車(chē)一直不來(lái)？　83 圖書(shū)搜索系統(tǒng)：要怎么搜索？　84 格式塔心理學(xué)和分類(lèi)法則　85 相近法則　86 相似法則　87 連續(xù)法則　88 封閉原則　89 共同命運(yùn)法則　90 從分類(lèi)法則和布局關(guān)系中讀出的含義　91 總結(jié)　92 練習(xí)　92 第5章　使用習(xí)慣　93 形狀與認(rèn)知上的差異　94 用于判斷性別的標(biāo)識(shí)：哪個(gè)是男洗手間哪個(gè)是女洗手間？　94 形似垃圾箱的某物：這不是○×　96 卡片的設(shè)計(jì)：為什么會(huì)搞錯(cuò)卡片的插入方向？　98 顏色與認(rèn)知上的差異　100 用于判斷性別的標(biāo)識(shí)：為什么會(huì)誤以為沒(méi)有男洗手間？　100 開(kāi)關(guān)上指示燈的顏色：綠色和紅色哪個(gè)表示打開(kāi)？　102 文字和顏色的組合：綠色的拖鞋是女性用的！　104 指旋鎖的角度：水平方向和垂直方向哪個(gè)方向是上鎖？　105 與各種“普通”之間的差異　106 英數(shù)字的羅列：308B房間在幾樓？　106 數(shù)碼相機(jī)的按鈕：為什么想要拍照卻關(guān)閉了電源？　108 手機(jī)上的撥號(hào)按鈕：撥號(hào)按鈕在左邊還是右邊？　110 智能手機(jī)的接聽(tīng)按鈕：接聽(tīng)按鈕在左邊還是右邊？　111 頁(yè)面導(dǎo)航：為什么沒(méi)能進(jìn)入下一頁(yè)？　112 Slip、Lapse、Mistake　115 總結(jié)　116 練習(xí)　116 第6章　一致性　117 顏色、形狀、方向和格式的一致性　118 開(kāi)關(guān)的一致性：怎樣關(guān)閉所有照明？　118 相鄰兩物的一致性：綠燈點(diǎn)亮表示打開(kāi)還是關(guān)閉？　120 門(mén)的一致性：洗手間里的哪個(gè)隔間正在使用中？　121 行為體系中的一致性：推開(kāi)？還是拉開(kāi)？　122 輸入表格的一致性：為什么會(huì)出現(xiàn)輸入錯(cuò)誤？　123 按鈕的含義：本想進(jìn)行關(guān)閉操作，為什么進(jìn)行的卻是放大操作？　124 順序的一致性　125 地名的排序：東京在哪里？　125 國(guó)家的排序：西班牙在哪里？　126 數(shù)字的排序：和這個(gè)號(hào)碼的鑰匙對(duì)應(yīng)的鎖柜是哪一個(gè)？　128 標(biāo)準(zhǔn)化　130 指南　132 總結(jié)　134 練習(xí)　134 第7章　制約　135 物理性制約　136 電池安裝方向的制約：電池要朝哪個(gè)方向安裝？　136 插入方向的制約：應(yīng)該哪一面朝上插入？　138 玻璃門(mén)的制約：應(yīng)該從哪里出入？　139 插入位置的制約：票要靠右插入！　140 各種各樣的制約　141 車(chē)載導(dǎo)航儀上的輸入系統(tǒng)：聯(lián)想候選項(xiàng)的選擇方法是？　141 投幣式儲(chǔ)物柜上的箭頭：為什么會(huì)搞錯(cuò)操作方向？　142 洗手間的標(biāo)識(shí)：為什么完全沒(méi)有女性使用女洗手間？　143 很難使用的自動(dòng)售票機(jī)：怎樣買(mǎi)5.25美元的車(chē)票？　145 輸入數(shù)字型的自動(dòng)售貨機(jī)：怎樣購(gòu)買(mǎi)12號(hào)商品？　147 教學(xué)大綱注冊(cè)系統(tǒng)：應(yīng)該輸入什么樣的數(shù)值？　149 防止出錯(cuò)的表格：不允許自由填寫(xiě)！　150 使用時(shí)/不使用時(shí)的狀況　151 洗手盆和烘手機(jī)的位置：沒(méi)辦法洗手！　151 推薦候選項(xiàng)的提示場(chǎng)所：不能輸入目的地！　152 讓人發(fā)愁的飲水機(jī)：怎樣放出熱水？　153 筆上的按鈕：明明正想寫(xiě)字呢！　154 移動(dòng)電源上的按鈕：為什么電量耗盡了？　155 空調(diào)和開(kāi)關(guān)：在調(diào)節(jié)溫度時(shí)為什么會(huì)關(guān)閉照明？　156 行為的7個(gè)階段理論　157 物理性制約、常識(shí)性制約、文化性制約、邏輯性制約　158 總結(jié)　160 練習(xí)　160 第8章　維護(hù)　161 年久失修導(dǎo)致的BAD　UI　162 洗手間里的兩個(gè)水龍頭：哪個(gè)能放出水？　162 門(mén)把手：為什么門(mén)打不開(kāi)？　164 自然的力量：公交車(chē)站在哪里？　165 手機(jī)和充電座：為什么不能充電了？　166 文化方面的改變導(dǎo)致的BAD　UI化　168 公共浴場(chǎng)里的洗手間：錯(cuò)入女浴室了？！　168 電梯上的文字提示：為什么沒(méi)能按下去其他樓層的按鈕？　169 洗手間的文字標(biāo)識(shí)：D和H哪個(gè)表示男性哪個(gè)表示女性？　170 受過(guò)去影響的BAD　UI　172 自動(dòng)門(mén)鎖的呼叫號(hào)碼：2-B應(yīng)該怎么呼叫？　172 擴(kuò)建的不易之處：去會(huì)議室要怎么走？　174 復(fù)雜的路線圖：去目的地應(yīng)該乘哪輛公交車(chē)？　176 飛機(jī)里的煙灰缸：明明是全面禁煙為什么還會(huì)有煙灰缸？　177 DIY維護(hù)　178 總結(jié)　184 練習(xí)　184 第9章　苛求用戶(hù)的BAD UI　185 考驗(yàn)記憶力的BAD　UI　186 旅館里周到的說(shuō)明：必須要鎖哪扇門(mén)？　186 食物的名稱(chēng)：想要購(gòu)買(mǎi)的菜品是哪個(gè)？　187 關(guān)于養(yǎng)老金的的申請(qǐng)：23年以后別忘了提交哦！　188 用于認(rèn)證的安全提示問(wèn)題：五十多年前學(xué)會(huì)的第一道菜是？　189 讓人心累的BAD　UI　190 數(shù)值的輸入方法：3萬(wàn)億日元是誰(shuí)的錯(cuò)？　190 不好用的轉(zhuǎn)賬頁(yè)面：怎樣使用半角片假名輸入？　192 礻申Excel：請(qǐng)按照1格1字書(shū)寫(xiě)，控制在200字以?xún)?nèi)　194 BAD　UI申請(qǐng)書(shū)：請(qǐng)注意填寫(xiě)時(shí)不要出錯(cuò)！　196 表格的制作時(shí)間和填寫(xiě)時(shí)間　198 驗(yàn)證碼：你不是人！　200 候選單詞和發(fā)送按鈕：為什么會(huì)打字打到一半郵件就發(fā)送出去了？　201 緊急出口的重要性：要怎么取消？　202 自動(dòng)修改：為什么會(huì)被修改得偏離了原本的意圖？　204 具有欺騙性的UI　205 在數(shù)量上糊弄人的折線圖：B的支持率的下降速度緩慢？　205 在數(shù)量上糊弄人的3D餅圖：本公司的市場(chǎng)占有率更多？　206 確認(rèn)的重要性：只是在查看候選時(shí)間，但是卻被罰錢(qián)了　208 按鈕型廣告：明明按下的是下載按鈕，但是為什么……　209 一不小心就會(huì)有疏忽的合約：可以免費(fèi)解約的只有2年后的1個(gè)月內(nèi)　210 BAD　UI和10個(gè)可用性原則　211 總結(jié)　212 練習(xí)　212 后記：有趣的BAD　UI的世界　213 前文回顧　213 為什么會(huì)出現(xiàn)BAD　UI　214 不存在完美的UI　215 BAD　UI和趣味　216 將BAD　UI融入教育之中　218 寫(xiě)在最后　219 致謝　219 UI相關(guān)的圖書(shū)　220