交互設(shè)計師的糾結(jié)有時候挺惹人討厭的，大量的口水浪費在小的細(xì)節(jié)上了，有時候我也會告誡自己，要著眼大局分清主次，一些小的細(xì)節(jié)干脆就不要太糾結(jié)了，可是我又相信，好的交互設(shè)計師一定要對細(xì)節(jié)有一針見血的判斷力，不瘋魔不成活，不糾結(jié)出不來好設(shè)計。

一、一個案例的反思

這里想聊聊騰訊微博iPhone新版的一個設(shè)計細(xì)節(jié)。

事件起源于我們的一個設(shè)計師提供了一個新版的視覺設(shè)計方案，整體很大氣，可是有一個地方別扭，他把選中的標(biāo)簽欄暗掉了，未選中的標(biāo)簽欄高亮了，我說是不是反了？他說沒反啊，騰訊微博就是這樣的。于是我去看了新版騰訊微博，竟然真是這樣。

圖1 騰訊微博的標(biāo)簽欄

那么，讓我們從以下三個角度看看，這樣做到底對不對：

1.HIG怎么說？

那么讓我們來對比一樣IOS系統(tǒng)的標(biāo)簽欄的樣式：

圖2 系統(tǒng)的標(biāo)簽欄樣式

iOS Human Interface Guidline里有對于Tab Bar的行為有這樣一句話的描述“When users select a tab， such as Search in YouTube， the tab’s background lightens and its image is highlighted”，選中的標(biāo)簽欄背景亮起，圖標(biāo)高亮。

2.其他應(yīng)用怎么做的？

既然是微博，對比一下其他微博客戶端，有哪個是選中狀態(tài)的標(biāo)簽暗掉的？

圖3 其他微博類客戶端

再對比一下其他的優(yōu)秀客戶端的設(shè)計，有哪個選中的標(biāo)簽是暗掉的？

圖4 其他優(yōu)秀客戶端

再對比一下Web端的標(biāo)簽?zāi)Ｊ剑�有哪個是選中的標(biāo)簽暗掉的？

圖5 Web版的一些標(biāo)簽設(shè)計

3.用戶怎么理解的？

于是我到騰訊微博上反饋了意見，看到了有些人跟我一樣糾結(jié)了，包括麥田老師，但也有些人還是覺得這里可以接受的，原因不外乎以下幾種：

“這里用補(bǔ)色來標(biāo)注選中狀態(tài)，表示不可點，其他的是可點的，所以高亮”

“等你選的當(dāng)然高亮，不需要再選的當(dāng)然暗啦”

“明暗比例1：4，應(yīng)該能分辨出來哪個是選中的，只要不是1：1就行，用戶能理解就行”

“誰規(guī)定的？用戶能理解就行唄”

標(biāo)簽： 交互設(shè)計 標(biāo)簽欄設(shè)計 產(chǎn)品設(shè)計 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。