2015-9-14 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服
我們通常在做APP設(shè)計(jì)的過(guò)程中，遇到很多看似很小，且很容易被忽略的問(wèn)題，正是這些小問(wèn)題，一次次的撩撥用戶(hù)的耐心，讓用戶(hù)對(duì)你的APP心生怨念。現(xiàn)在WeX5君嘔血為大家整理出APP設(shè)計(jì)的21條禁忌，希望與APP設(shè)計(jì)者的您共勉。
即便一個(gè)簡(jiǎn)單的 APP 也要有一個(gè)思慮周全的流程圖，以確保在 APP 有合乎邏輯的、合理的導(dǎo)航結(jié)構(gòu)。另一點(diǎn)值得關(guān)注的是確保核心功能所在的屏幕位于上層而不是被埋沒(méi)在多層導(dǎo)航元素之下。
跳過(guò)流程圖直接進(jìn)進(jìn)入開(kāi)發(fā)會(huì)讓開(kāi)發(fā)變得復(fù)雜、不可控，很容易讓用戶(hù)迷茫，最后選擇關(guān)掉或者卸載你的 App。
設(shè)計(jì)師創(chuàng)建的每一個(gè)細(xì)節(jié)都要經(jīng)過(guò)開(kāi)發(fā)者才能變得活靈活現(xiàn)。花幾個(gè)小時(shí)和幾天時(shí)間做出的簡(jiǎn)單設(shè)計(jì)更改對(duì) App 功能的影響是截然不同的。還有，設(shè)計(jì)不能命令功能。比如，一個(gè)計(jì)劃好的 App 可能有一個(gè)搜索框，設(shè)計(jì)師預(yù)想的是一個(gè)產(chǎn)生實(shí)時(shí)結(jié)果的鍵入搜索，但設(shè)計(jì)師不能是做這個(gè)重大決定的唯一決策人。
在用戶(hù)首次打開(kāi) App 的時(shí)候，給用戶(hù)一個(gè)動(dòng)畫(huà)的介紹是個(gè)不錯(cuò)的想法，但不能太過(guò)火了。事實(shí)上，這些介紹動(dòng)畫(huà)也延遲了用戶(hù)接觸 App 的時(shí)間。如果你打算使用介紹動(dòng)畫(huà)，那要讓動(dòng)畫(huà)時(shí)間盡可能短，設(shè)計(jì)盡可能精細(xì)以及足夠吸引人，值得用戶(hù)花費(fèi)時(shí)間等待。
App 加載過(guò)程中會(huì)先展現(xiàn)圖片，再過(guò)渡至動(dòng)畫(huà)。要確保這個(gè)過(guò)度是平滑的，貼切自然的。有的 App 從加載圖片過(guò)渡至介紹動(dòng)畫(huà)設(shè)計(jì)的非常蹩腳，這就很無(wú)趣了。
App 加載時(shí)間過(guò)長(zhǎng)很容易讓用戶(hù)以為出現(xiàn)了什么故障，也會(huì)帶來(lái)糟糕的用戶(hù)體驗(yàn)。App 加載的時(shí)候不要讓用戶(hù)看到空白的屏幕，使用加載指示條或者小動(dòng)畫(huà)讓用戶(hù)知道 App 處于正常運(yùn)行當(dāng)中。如果能加入一個(gè)加載進(jìn)度指示條就更好了。
一般按鈕會(huì)有四態(tài)，不可點(diǎn)擊效果、可點(diǎn)擊效果、聚焦?fàn)顟B(tài)、按下?tīng)顟B(tài)。
如果你的按鈕此時(shí)處于不可用狀態(tài)，那么一定要灰掉，或者拿掉按鈕，否則會(huì)給用戶(hù)誤導(dǎo)。
菜單項(xiàng)以5~7個(gè)為宜，如果有二級(jí)菜單，就要注意合理的菜單分類(lèi)，不能有太多層級(jí)的菜單，否則很難預(yù)期，也很難找到，尋找和返回都會(huì)變得很麻煩。
APP界面很小，寸土寸金，一頁(yè)只能顯示下6~10個(gè)列表，一行只能顯示下10~16個(gè)字，標(biāo)題欄的字?jǐn)?shù)以5個(gè)以?xún)?nèi)為宜，標(biāo)簽欄也以2~3個(gè)為宜， 那么這時(shí) 候出現(xiàn)文字過(guò)長(zhǎng)的情況，一定要定義一下處理方式，如果是選擇型的，一般是截?cái)嗷蛘叽螯c(diǎn)縮略;如果是內(nèi)容閱讀型的，可以折行。但最合理的方式還是精簡(jiǎn)文字內(nèi) 容，縮短文字長(zhǎng)度。
由于APP是碎片時(shí)間、片段式閱讀，所以APP界面上的文字表意性要求的更高，更苛刻，一定要在用戶(hù)瞟到的瞬間，準(zhǔn)確的傳達(dá)信息。除了表意清晰之外，還要求語(yǔ)言精簡(jiǎn)，避免啰嗦;使用用戶(hù)的語(yǔ)言而不是程序的語(yǔ)言;產(chǎn)品文案體現(xiàn)產(chǎn)品性格。
做交互的時(shí)候一定要有一個(gè)任務(wù)流程的概念貫穿始終，用戶(hù)是為了完成某個(gè)任務(wù)而使用軟件的，交互設(shè)計(jì)師除了關(guān)注界面元素、跳轉(zhuǎn)邏輯和交互反饋之外，還要關(guān)注用戶(hù)任務(wù)，分得清主要任務(wù)和次要人物，給主要任務(wù)一個(gè)暢通無(wú)阻的清晰流程，不要給予太多可能的分支，干擾主要流程。
相關(guān)選項(xiàng)一定要具有操作上的延續(xù)性，雖然APP屏幕看起來(lái)比電腦屏幕要小的多，但是APP在屏幕上移動(dòng)的代價(jià)，卻要比鼠標(biāo)在電腦上移動(dòng)的代價(jià)大的多，如果手機(jī)上相關(guān)選選離得很遠(yuǎn)的話(huà)，用戶(hù)一是容易迷失，找不到下一步操作，二是需要移動(dòng)手指，到屏幕另一端觸發(fā)操作。
流量、電量、速度和穩(wěn)定性是APP產(chǎn)品的四個(gè)硬指標(biāo)，如果你的應(yīng)用不能合理的幫助用戶(hù)節(jié)約流量、電量，提升瀏覽速度和瀏覽體驗(yàn)，保證應(yīng)用的穩(wěn)定性能，就不要談什么用戶(hù)體驗(yàn)。你可以利用預(yù)加載緩存、批量載入、動(dòng)態(tài)刷新、服務(wù)端數(shù)據(jù)壓縮等方式來(lái)保證省、快、穩(wěn)基礎(chǔ)體驗(yàn)。
我們都知道移動(dòng)端有個(gè)神奇的數(shù)字“44”，根據(jù)食指最小點(diǎn)觸距離7mm、拇指最小點(diǎn)觸距離9mm，可以推導(dǎo)出做設(shè)計(jì)的時(shí)候，最小的點(diǎn)觸距離是 44*32 px。你可以設(shè)計(jì)一個(gè)精美的小圖標(biāo)，但是在定義它的點(diǎn)觸大小的時(shí)候，卻可以做放大處理，但你千萬(wàn)不要設(shè)計(jì)一個(gè)傻大的圖標(biāo)，點(diǎn)觸范圍卻比圖標(biāo)要小，這樣會(huì)給 用戶(hù)帶來(lái)明顯的誤操作挫敗感。
標(biāo)簽頁(yè)跟內(nèi)容需要有很好的聯(lián)動(dòng)關(guān)系，一般一個(gè)界面內(nèi)有二級(jí)標(biāo)簽就足夠復(fù)雜了，千萬(wàn)不要再有三級(jí)標(biāo)簽、四級(jí)標(biāo)簽。每個(gè)標(biāo)簽頁(yè)都有自己特有的內(nèi)容，當(dāng)切 換標(biāo)簽的時(shí)候，內(nèi)容跟著切換。標(biāo)簽頁(yè)如果是點(diǎn)擊切換，內(nèi)容部分可以整體刷新，標(biāo)簽頁(yè)如果是滑動(dòng)切換，內(nèi)容頁(yè)也要跟著滑動(dòng)切換，千萬(wàn)不要一個(gè)點(diǎn)、一個(gè)滑。
APP產(chǎn)品交互設(shè)計(jì)要經(jīng)歷縮減、隱藏、附加、組織的過(guò)程，千萬(wàn)不要妄圖把什么功能、什么操作都暴露出來(lái)，以彰顯強(qiáng)大。你需要把自己應(yīng)用的所有功能所 有操作做個(gè)優(yōu)先級(jí)設(shè)定，那些常用的20%的功能，放在界面的主要位置上，其他80%的操作，放在次要位置或合理歸類(lèi)組織后，隱藏起來(lái)就可以了。
我們?cè)谧鲈O(shè)計(jì)的時(shí)候，往往是提供理想化的場(chǎng)景，用戶(hù)都已經(jīng)進(jìn)來(lái)了，我們?cè)趺赐妗５牵鶓?yīng)用剛推出的時(shí)候，是沒(méi)有用戶(hù)的，甚至當(dāng)應(yīng)用有了一定用戶(hù) 基礎(chǔ)的時(shí)候，新進(jìn)來(lái)的用戶(hù)打開(kāi)應(yīng)用的時(shí)候，應(yīng)用仍然可能是一種沒(méi)有數(shù)據(jù)的狀態(tài)，再或者當(dāng)用戶(hù)清楚了全部數(shù)據(jù)，這三種情況下，用戶(hù)都可能遇到空數(shù)據(jù)的界面。 新手設(shè)計(jì)師往往不加設(shè)計(jì)，這時(shí)候用戶(hù)就會(huì)看到一個(gè)空白界面，茫然失措。有經(jīng)驗(yàn)的做法就是，提供一個(gè)情感化的界面，告訴用戶(hù)當(dāng)前沒(méi)有內(nèi)容;更具引導(dǎo)性的做 法，就是引導(dǎo)用戶(hù)去執(zhí)行操作。
去年就預(yù)言用戶(hù)引導(dǎo)將要泛濫，很明顯設(shè)計(jì)部門(mén)都喜歡用漂亮的引導(dǎo)界面告訴用戶(hù)新增的功能或隱藏的應(yīng)用，但不是所有的應(yīng)用、所有的功能都需要花哨的引 導(dǎo)的。 如果是通用的功能、非重點(diǎn)的模塊，根本就不需要引導(dǎo);如果是功能告知，只需呀輕量級(jí)的引導(dǎo);如果是版本更新說(shuō)明，說(shuō)明書(shū)式的引導(dǎo)可以采用，但是要言簡(jiǎn)意 賅。
APP產(chǎn)品只要是需要聯(lián)網(wǎng)，需要交換數(shù)據(jù)，都需要提供一個(gè)加載中狀態(tài)的，無(wú)論是菊花轉(zhuǎn)還是Toast還是對(duì)話(huà)框，你需要給開(kāi)發(fā)人員一個(gè)全局的定義， 并且要告知加載中是模態(tài)(前臺(tái)加載)的還是非模態(tài)的(后臺(tái)加載)。且要考慮到加載時(shí)間過(guò)長(zhǎng)、網(wǎng)絡(luò)開(kāi)關(guān)沒(méi)有打開(kāi)、網(wǎng)絡(luò)不通等情況分別怎么去處理。
在為Android做設(shè)計(jì)的時(shí)候，會(huì)涉及到硬件交互，其中Back鍵的使用，是一門(mén)學(xué)問(wèn)，Android官方有一些指導(dǎo)原則可以借鑒，但是具體開(kāi)發(fā) 的時(shí)候，還是會(huì)有很多特殊情況，比如單一實(shí)例的替換、鍵盤(pán)及一些中間狀態(tài)，這種情況下，Back可能需要被定義一下，該回到前一個(gè)實(shí)例(那就需要變成多實(shí) 例 了)還是該回到初始狀態(tài)(清空輸入內(nèi)容或恢復(fù)初始狀態(tài))。
由于橫屏模式下，縱向空間變得格外寶貴，導(dǎo)航欄、標(biāo)簽欄、鍵盤(pán)都需要被壓扁，橫盤(pán)模式一定要考慮是簡(jiǎn)單拉伸適配還是重新設(shè)計(jì)，如果你的應(yīng)用不適合在 橫屏模式下使用，就屏蔽橫盤(pán)，如果你的應(yīng)用包括應(yīng)用widget都需要支持橫盤(pán)模式(甚至是帶側(cè)滑鍵盤(pán)的橫屏機(jī)器)，就需要提供設(shè)計(jì)方案。
不是每個(gè)元素都是可視化的，比如 iPhone Mail app 的刪除進(jìn)程。在收件箱內(nèi)，用戶(hù)可以猛擊屏幕顯示刪除按鈕，用戶(hù)就不用點(diǎn)擊“編輯”，選擇信息然后再刪除信息。不過(guò)，也不能說(shuō)“編輯”菜單一點(diǎn)用處都沒(méi)有， 不知道快捷操作的用戶(hù)還是需要的，而用戶(hù)還可以通過(guò)“編輯”菜單一次性標(biāo)注多條信息/郵件。
可用性測(cè)試是必須的，不管你的 App 看起來(lái)多么好。找值得信任的人(或者有經(jīng)驗(yàn)的設(shè)計(jì)師)進(jìn)行小范圍封閉測(cè)試，在公開(kāi)發(fā)布之前更新下界面。另一個(gè)簡(jiǎn)單易行的獲得用戶(hù)反饋的方法是在分類(lèi)網(wǎng)站張貼廣告招募合適的人進(jìn)行焦點(diǎn)小組測(cè)試。
App江湖上傳言多年的關(guān)于多屏、多分辨率、多端、多操作系統(tǒng)支持的若干注意呢？
在WeX5君的世界觀里，移動(dòng)開(kāi)發(fā)者不需要、不應(yīng)該操心這個(gè)問(wèn)題。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://ssll180.com