導(dǎo)航設(shè)計(jì)中一個(gè)基本的任務(wù)點(diǎn)是準(zhǔn)確標(biāo)明當(dāng)前選中項(xiàng)，不當(dāng)?shù)脑O(shè)計(jì)很容易造成用戶困惑。尤其是只有兩個(gè)列表項(xiàng)時(shí)，要對用戶準(zhǔn)確傳達(dá)當(dāng)前的選中項(xiàng)，設(shè)計(jì)上要很謹(jǐn)慎。針對最近項(xiàng)目中遇到的這個(gè)問題，記一筆。

用戶判斷選中狀態(tài)的心智模型有兩種：

一種是指示燈式，如紅綠燈、電梯操作面板、各種儀表盤等，指示燈亮起表示選中——即高亮；

另一種是按鈕式，按鈕陷下去表示選中——即灰掉。明顯告訴用戶這個(gè)正在使用中，不可點(diǎn)。

===========================案例分割線============================

以上兩個(gè)分別來自淘寶 和 有啊，都是選中狀態(tài)高亮。（合理的指示燈式體驗(yàn)）

以上兩個(gè)設(shè)計(jì)分別來自google和iTunes，都是選中狀態(tài)灰掉。相信不管兩個(gè)列表項(xiàng)還是三個(gè)列表項(xiàng)，都可以清楚知道哪個(gè)是選中項(xiàng)。（合理的按鈕式體驗(yàn)）

上圖來自阿里國際站，圖標(biāo)+鏈接的形式，選中狀態(tài)圖標(biāo)灰掉。圖標(biāo)和鏈接都能傳達(dá)選中狀態(tài)，當(dāng)用戶對兩者認(rèn)知不一致時(shí)，該相信圖標(biāo)還是相信鏈接？（指示燈式與按鈕式混用，且指示燈式反著用）

上圖來自alibaba wholesale， 選中狀態(tài)圖標(biāo)灰掉。與有啊一模一樣的設(shè)計(jì)，實(shí)際意義竟然完全相反。（可以看成指示燈式反著用，也可以看成按鈕式卻沒設(shè)計(jì)成按鈕）

========================總結(jié)分割線============================

綜合以上的案例，造成用戶困惑的設(shè)計(jì)，要么是把指示燈式反著用，要么是按鈕式?jīng)]設(shè)計(jì)成按鈕，要么是兩者混著用卻沒統(tǒng)一。

總結(jié)：
1、選中狀態(tài)高亮，代表最廣大用戶的認(rèn)知習(xí)慣。
2、使用圖標(biāo)表示選中狀態(tài)時(shí)，應(yīng)該讓選中狀態(tài)的圖標(biāo)高亮。如果非要讓選中狀態(tài)的圖標(biāo)灰掉，圖標(biāo)應(yīng)該設(shè)計(jì)成按鈕質(zhì)感，視覺上明確表現(xiàn)出陷下和浮起的狀態(tài)。
3、利用鏈接與非鏈接也可以準(zhǔn)確地表示選中狀態(tài)。圖標(biāo)+鏈接的形式慎用。

原文：http://www.pigtwo.com/blog/?p=3