搞砸了的設(shè)計 隨處可見的BAD UI

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