12.23日(rì)音(yīn)訊,不(bù)糾結₹$•的(de)網頁設計(jì)師(shī)出不(bù)來(lái)好(hǎ"≈o)作(zuò)品。交互設計(jì)師(shī)的(de)糾結•→有(yǒu)時(shí)候挺惹人(rén)討(tǎo)厭(yφ♣φ¥àn)的(de)，大(dà)量的(de)口水(shuǐ)浪費(fèi)在小(>φ§xiǎo)的(de)細節上(shàng)了α→₩(le)，有(yǒu)時(shí)候我也(yě•→ )會(huì)告誡自(zì)己，要(yào)著(zhe¶λ$←)眼大(dà)局分(fēn)清主次，一(yī)些(xiē)小(xiǎo)®₽∑的(de)細節幹脆就(jiù)不(bù)要(yào)太糾↑Ω↕結了(le)，可(kě)是(shì)我又(yòu)相(x∏¥≈¥iàng)信，好(hǎo)的(de)交互設計(jì)師(sh εī)一(yī)定要(yào)對(duì)細↓©§節有(yǒu)一(yī)針見(jiàn)血的(de)判斷力，不§>↔(bù)瘋魔不(bù)成活，不(bù)糾結出不γ™>(bù)來(lái)好(hǎo)設計(jì)。
一(yī)、一(yī)個(gè)案例的(de)反思↑>"
這(zhè)裡(lǐ)想聊聊騰訊微(wēi)博iPhone新版的λ←←(de)一(yī)個(gè)設計(jì)細節。
事(shì)件(jiàn)起源于我☆∑們的(de)一(yī)個(gè)設計(jì)師(shī)提供©Ωπ了(le)一(yī)個(gè)新版的(de)視(sh✔♣≠ì)覺設計(jì)方案，整體(tǐ)很(hěn)大(dà)氣，可(kě) ¥是(shì)有(yǒu)一(yī)個(gè)地(dì)方别扭，他(tā)×₽把選中的(de)标簽欄暗(àn)掉了(le)∏γ&♣，未選中的(de)标簽欄高(gāo)亮(liàng)了(le)，我說(shu≠∞ō)是(shì)不(bù)是(shì)反了(le)？他(tā)說(σδshuō)沒反啊，騰訊微(wēi)博就(jiù)是(shì)這( < ™zhè)樣的(de)。于是(shì)我去(qε'ù)看(kàn)了(le)新版騰訊微(wēi)博，竟然真是(s↕∑δhì)這(zhè)樣。
那(nà)麽，讓我們從(cóng)以下(xi® ♦à)三個(gè)角度看(kàn)看(kàn)，這(zhè)樣做(zuò§★)到(dào)底對(duì)不(bù)對(duì)：
1.HIG怎麽說(shuō)？
那(nà)麽讓我們來(lái)對(duì)比一(yī)樣¥♦IOS系統的(de)标簽欄的(de)樣式：
iOSHumanInterfaceGuidline裡(lǐ↓ )有(yǒu)對(duì)于TabBar的(de)≥π行(xíng)為(wèi)有(yǒu)這(zhè)樣一(yī)句話&♠(huà)的(de)描述“Whenu₹≥αsersselectatab,suchasSearchinY•↓✔ouTube,thetab’sback λgroundlightensanditsimag₽♠★®eishighlighted”，選中的(de)标簽欄背景亮($®liàng)起，圖标高(gāo)亮(liàng)。
2.其他(tā)應用(yòng)怎麽做(®™zuò)的(de)？
既然是(shì)微(wēi)博，對(duì)比一©$★(yī)下(xià)其他(tā)微(wēi)博客戶端，有(yǒu)哪個(ε&gè)是(shì)選中狀态的(de)标簽暗(à€♦×γn)掉的(de)？
再對(duì)比一(yī)下(xià)其他(tā)的(de >φ&)優秀客戶端的(de)設計(jì)，有(yǒu)哪個₽₹ ∏(gè)選中的(de)标簽是(shì)暗(àn)掉的(de)？
再對(duì)比一(yī)下(xià)Web端的(≥γde)标簽模式，有(yǒu)哪個(gè)是(shì)選中的(de↓¶✔)标簽暗(àn)掉的(de)？
3.用(yòng)戶怎麽理(lǐ)解的(de)？
于是(shì)我到(dào)騰訊微(wēi)博上(shàng☆γ™)反饋了(le)意見(jiàn)，看(kàn)到(dào)了✔£(le)有(yǒu)些(xiē)人(rén)跟我一(yī ☆©)樣糾結了(le)，包括麥田老(lǎo)師(shī)，但(dàn)也(y±✘ě)有(yǒu)些(xiē)人(rén)還(hái)是(shα♥∑ì)覺得(de)這(zhè)裡(lǐ)可(k∏¥♥ě)以接受的(de)，原因不(bù)外(wγ&ài)乎以下(xià)幾種：
“這(zhè)裡(lǐ)用(yòng'∏)補色來(lái)标注選中狀态，表示不(bù)可(kě)點，£¥ £其他(tā)的(de)是(shì)可(kě)點的(de)，所以高(gāo)→↓φ™亮(liàng)”
“等你(nǐ)選的(de)當然高(gāo)亮(li¥φ♥↕àng)，不(bù)需要(yào)再選的(de)當然暗↓☆↕(àn)啦”
“明(míng)暗(àn)比例1σ ：4，應該能(néng)分(fēn)辨出來(l→β✔ái)哪個(gè)是(shì)選中的(de)，隻要(yào)不(bù)是(sh ≠ì)1：1就(jiù)行(xíng)，用(yòng)戶能(nén€Ω♠≈g)理(lǐ)解就(jiù)行(xíng)”
“誰規定的(de)？用(yòng)戶能(néng)ε↔☆理(lǐ)解就(jiù)行(xíng)呗”
請(qǐng)注意，這(zhè)裡(lǐ)的(de)明♥✘♦↕(míng)暗(àn)關系，不(bù)應該是(shì)用(<"∑÷yòng)來(lái)區(qū)别可(kě)點、不(bù)可(kě)點的(d✔↑e)，而是(shì)應該用(yòng)來(lái)區(qū)别是(shì) →≠'否處于活動狀态的(de)，可(kě)以參考Web版ModuleTaπ♦bs的(de)說(shuō)明(míng)：
Theactivepaneisth♣"∏epanethatiscurrentlybein™≥gshown;itispairedwiththeactivetabc♦÷δ∞ontrol.Thepanethatisdisplayedimδ₩♦mediatelywhenthewebpagefi®≤ε÷rstloadsisthedefaultactive±>α'pane.
Inactivepanes(notshowninthe₩"&illustration)arethepanesthatarecurrentl↑©ynotbeingshown.Aninactivep✔&βΩanebecomestheactivepanewhenitstabcontr"≤₽olisclicked
選中的(de)标簽欄，應該是(shì)處于活動狀态的(de)，整個(±×gè)頁面的(de)內(nèi)容，也(yě)跟這☆₹(zhè)個(gè)标簽欄是(shì)從(cóng)屬關系。默認加>★♥載的(de)，也(yě)是(shì)那(nà)個(gè)唯一(yī)的(de)§≤←活動狀态的(de)标簽頁，當你(nǐ)點擊其他(tā)标簽頁時(shí£ )，其他(tā)标簽頁才會(huì)被加載出來(lái)。你(nǐ↓ε)明(míng)暗(àn)颠倒了(le)，會(huì)讓人(rén)以♦♠♥為(wèi)這(zhè)個(gè)标簽頁處于非<↑₹活動狀态呢(ne)。
另外(wài)，這(zhè)個(gè)标簽頁不(bù)是(✘₩shì)不(bù)可(kě)點的(de)狀态，當有(yǒu)新消息的(d♣<δ≤e)時(shí)候，這(zhè)個(gè)标簽上(shàng)會(hu×δ →ì)有(yǒu)氣泡提醒的(de)，這(zhè)時(shí)候雙擊 π≤标簽就(jiù)可(kě)以刷新內(nèi)容，加載₹δ≤新數(shù)據了(le)。
最後，說(shuō)明(míng)暗(àn$♣•★)比例1：4，所以能(néng)猜出來(lái)那(nà)個(gè)是(s✔®σφhì)選中的(de)朋(péng)友(yǒu)，猜出來γ&☆ (lái)哪個(gè)是(shì)選中的(de)不(bù)難，但(dàn)這(±₽₩zhè)畢竟不(bù)是(shì)智商測試嘛，還(hái)是(shì)以滿意度δπ ≥為(wèi)基礎來(lái)做(zuò)設計(jì)的(de)，而且最好↑♦α(hǎo)做(zuò)到(dào)不(bù∑←')需要(yào)思考，是(shì)不(bù)？就(jiù)算(₹≤Ω∑suàn)用(yòng)戶真的(de)沒有(yǒu)感覺異樣，我也(yěε¥)會(huì)覺得(de)自(zì)己的(de)設計(jì)層λ&次邏輯不(bù)合理(lǐ)，然後給自(zì)己狠狠拍(∑¥♥₽pāi)上(shàng)一(yī)塊闆磚的£" (de)。
我知(zhī)道(dào)批評人(rén)家(jiā)♥↔∑的(de)設計(jì)挺不(bù)好(hǎo)的(de✘♠∑)，畢竟，新版設計(jì)整體(tǐ)來™₽☆α(lái)說(shuō)很(hěn)優秀，新LOGO也( βyě)很(hěn)好(hǎo)看(kàn)，瑕不(bù)掩瑜，希望騰訊微(∑✘wēi)博越來(lái)越好(hǎo)
二、标簽欄的(de)設計(jì)指南•♦☆(nán)
标簽欄的(de)設計(jì)，可(kě)以參考↕<以下(xià)一(yī)些(xiē)标準化(huà)的(d©λe)設計(jì)指南(nán)：
1.處于選中狀态的(de)标簽欄要(yào)高(gāo"Ωλ↕)亮(liàng)，用(yòng)以标識活動狀态≈₩
程序啓動時(shí)，優先加載的(de)≈$ λ內(nèi)容肯定是(shì)選中狀态的(÷εde)标簽頁的(de)內(nèi)容。選中狀态的(de)&'α∏标簽要(yào)處于視(shì)覺上(shàng)的(d±∞¥e)活動狀态。
2.标簽的(de)數(shù)量不(♥ bù)要(yào)多(duō)于5個(gè)，如(rú)果太多(duσ✔ō)就(jiù)放(fàng)在more←α€≥裡(lǐ)
标簽的(de)數(shù)量，最多(duō)不(↕>♠$bù)要(yào)多(duō)餘5個(gè)，否則就(j♥>iù)放(fàng)不(bù)下(xià)了(le)。如(rú)果你(©εnǐ)平級的(de)信息模塊實在是(shì)太φ✔多(duō)，可(kě)以考慮除了(le)最重要(yào)的(de)4€€&'個(gè)标簽頁之外(wài)，增加一(∏δεyī)個(gè)More标簽，把那(nà)些(xiēδ•)次重要(yào)的(de)标簽，都(dōu)放(fàng)在More标→δ簽裡(lǐ)。
但(dàn)是(shì)，建議(yì)還(hái)→©是(shì)盡量不(bù)要(yào)有(yǒu)More這(zhè)個(gè♠&)标簽，當More裡(lǐ)的(de)內(nèi)容也(yě)超過5Ω←條時(shí)，就(jiù)要(yào)考慮給用(yòng)戶帶來(l∞ε×>ái)的(de)認知(zhī)負擔了(le)。據說(shuō)測試顯示>←β，大(dà)部分(fēn)用(yòng)戶都(dōu)不(bù)知↔γ(zhī)道(dào)也(yě)不(bùα∞$)關注更多(duō)裡(lǐ)有(yǒu)什(shéα™ n)麽，根本都(dōu)不(bù)去(qù)打開(k™♦←≈āi)它。
當然，你(nǐ)也(yě)可(kě)以讓÷ ₩用(yòng)戶去(qù)編輯首選标簽，不(bù)過要Ω§(yào)知(zhī)道(dào)，用(yòng)戶自(z£♣ε€ì)定義永遠(yuǎn)是(shì)高(gāo)級用(y®×₩òng)戶才會(huì)使用(yòng)的(de)₹Ω↓高(gāo)級功能(néng)，不(bù)能(n☆≠>♦éng)用(yòng)它來(lái)解決普世問(§®φwèn)題。
3.标簽是(shì)用(yòng)來(lái)做(zuò)模塊切換的(α¶φ↓de)，而不(bù)是(shì)操作(zuò)入口
如(rú)果是(shì)想提供對(duì&₩ )當前頁面元素的(de)操作(zuò)，可(kě)以使用(yòng)工(g©←ōng)具欄，而不(bù)是(shì)标簽欄，标簽是(shì)對(duì)©¥內(nèi)容模塊的(de)平級切換。當然現(xiàn)在比較流行(€☆xíng)把重要(yào)操作(zuò)放(fàng)在标簽欄的(σ™ de)某個(gè)位置上(shàng)，如(rú)一(yī)系列¶'的(de)拍(pāi)照(zhào)應用(yòng)，都(dōuβ←§)把拍(pāi)照(zhào)放(fàng)在标簽欄中間(ji≤≈δ↕ān)，做(zuò)了(le)一(yī)個(gè)差異化(h§σuà)的(de)樣式設計(jì)，也(yě)♥是(shì)可(kě)以參考的(de)。
4.可(kě)以用(yòng)紅(hóng)色氣泡或π€λ≠其他(tā)形式在标簽欄上(shàng)标識新消息
當有(yǒu)新消息到(dào)達是(shì)，可(kě)以在标簽♥φ欄上(shàng)用(yòng)數(shù)字氣泡或者其他(tā)形式§給予提醒。
5.如(rú)果圖标的(de)表意性不(bù)夠γ≥¥φ好(hǎo)的(de)話(huà)，一(yī)定要↓₹₽(yào)用(yòng)圖标加文(wén)字來(l♦<ái)表達标簽內(nèi)容
iPhone有(yǒu)提供一(yī)些(∏Ωα₹xiē)系統圖标，用(yòng)于工(gōng)具欄上(shàng)，表•☆示收藏、曆史、書(shū)簽、更多(duō)等等，如(rú)★®Ω果是(shì)的(de)标簽可(kě)以用(y•≥×φòng)系統圖标來(lái)表達，盡量用(yòng)系統圖标，如(₽↕₩rú)果你(nǐ)非要(yào)自(zì)π 己設計(jì)也(yě)可(kě)以，但(dàn)是(shì)請(qǐng)≥∞注意表意性，讓用(yòng)戶不(bù)需要(yào)思♦•'¥考也(yě)能(néng)知(zhī)道(dào)是(sγ≠γhì)什(shén)麽。如(rú)果圖标的±Ω(de)表意性達不(bù)到(dào)要(yàoφπ§♠)求的(de)話(huà)，請(qǐng)一(yī)定α₽要(yào)輔助文(wén)字來(lái)說(shuō)明(m™"íng)，文(wén)字不(bù)能(néng)太長(chán₹>∞g)，防止折行(xíng)顯示。
6.如(rú)果你(nǐ)的(de)操作(♦ש₽zuò)産生(shēng)标簽切換，不(bù☆♣€δ)要(yào)直接跳(tiào)轉，而是(shì)給予視(shì)♦©→γ覺引導
如(rú)果你(nǐ)把某個(gè)條目從(cóng)一(↓yī)個(gè)标簽頁移動到(dào)另外(wài)一(yī)個(gè$÷)标簽頁了(le)，千萬不(bù)要(yào)£<直接把标簽頁跳(tiào)轉過去(qù)，這(zhè)樣做(zuò)，↓×Ω₩1會(huì)讓用(yòng)戶失去(qù)控制(zhì)杆，2如(σ←£γrú)果用(yòng)戶不(bù)小(xi¥¶'≠ǎo)心溜号了(le)，就(jiù)會(huì)在你(nǐ)的(de)程♠☆₹序中迷失了(le)。但(dàn)是(shì)，你(nǐ)又(y ♥λòu)不(bù)得(de)不(bù)告知(←★←zhī)用(yòng)戶，內(nèi)容已經産生(β∞ shēng)了(le)狀态變更，這(zhè)時(₹πshí)候最好(hǎo)借助于引導動畫(huà)。
