1、能觸動人心嗎?
a.關注“五要素”--人物(應用的受眾)、事件(受眾會做的事情)、時間(環(huán)境如何)、地點(環(huán)境如何)、起因(受眾的動機和目的)。發(fā)掘你應用觸動人心的先決條件,你的應用與眾不同的為用戶解決了什么問題?計劃好用例和應用場景--一個簡單的故事,以用戶為主人公,在特定的環(huán)境完成特定的任務。將注意力集中在五要素特別是起因上,因為起因不僅需要考慮用戶為什么需要這些功能或內容,還需要考慮為什么用戶需要在手持設備上進行操作。
b.關注你應用的功能該如何才能適用于離開辦公桌后的情境。要考慮三種移動用戶的心態(tài):(1)想完成微任務(移動設備及其適合斷斷續(xù)續(xù)的活動--微任務)。滿足此心態(tài)的這類應用(如快速記錄想法的便簽)簡單提供較少功能卻能讓人更快更輕松的完成任務,為短暫而頻繁的使用而優(yōu)化,能利用用戶大多數(shù)閑暇時間,且能適應工作隨時被打斷的情況。在設計此類應用時要根據(jù)短暫的活動即微任務來設計最終功能。(2)想了解周遭所發(fā)生的事件(如人生三急時找個廁所)。手機包含各類傳感器,如攝像頭、音頻和位置服務。確定你的受眾,利用好用戶個人當前所處的環(huán)境,適時地為他們個人的任務和信息提供恰好的幫助。(3)想打發(fā)無聊時間。用以打發(fā)無聊的應用,它們共同的主線都是讓人探索(無論是用戶自己輸入的內容、歷史記錄,還是最新的新聞、社區(qū)交流或推薦的內容)。收集個人信息的應用(如減肥日記和待辦事宜),本質上都是記錄用戶過去已完成的或將來要完成的事項。完成收集并跟蹤信息的微任務,讓用戶能夠整理好收集到的數(shù)據(jù),來查看他們目前的進度,并確定努力的方向。
c.確定好與類似應用的區(qū)別所在。“技能”和“魅力”讓應用與眾不同。如何獨樹一幟?找到切入點。(前提是你很清楚你的應用要做些什么,你也很了解別人會如何邊做其他事情邊用你的應用。)有獨特的激勵機制,緊密的面向特定受眾,有別人無法提供的利基內容,有全新方式來展示信息,有簡單有效的技術,有大量的社區(qū)用戶在應用中互動,能同樣解決問題卻更便宜,應用會增強你在網(wǎng)站或現(xiàn)實世界中的所見所作之事,或是無法抗拒的魅力,個性和長相都是魅力之一。(應用的表象過分花哨可能在誘導用戶的過程中,讓用戶分心造成用戶的不滿,且會掩蓋應用真正要傳遞的信息和功能。)
d.不斷更新內容或打造社區(qū),這兩種方式都能讓你的應用在用戶手機上待得更久。對于管理個人事務的工具(如日歷、記賬工具等),只要用戶什么時候想看或操作就會回來打開這些工具,或社交類(如微信和短信等)只要有潛在需求,就對用戶還有用。游戲應用可以通過應用內購買來提供附加關卡,這種方式不僅能讓玩家繼續(xù)玩樂還可以為公司創(chuàng)造附加收入,游戲內容也同時隨著你玩的程度的提高而擴充,這是不斷進步的成就系統(tǒng)。在應用中看了足夠的章節(jié),完成了足夠的挑戰(zhàn),學習了足夠多的課程時,成就系統(tǒng)就可以為你解開新的內容。在執(zhí)行成就系統(tǒng)的同時加入社交,打造社區(qū)。人類永遠是社會動物,我們都希望所玩之物能讓我們有所交流、競爭和貢獻。(如游戲應用中的競技功能,還有其他應用中的分享功能,社區(qū)中的評論功能都屬于人與人之間的互動。)你不必自己親自建造平臺,只要把你的應用接入到已有的社交網(wǎng)絡即可(如微信)。
e.要想的多,但是要做的精,只提供“夠用就好”的功能。最開始計劃應用時,盡可能多的考慮各種受眾、功能以及與其他應用不同的地方,大膽想象。然后,羅列出所有的功能,將大多數(shù)功能點扼殺,反復推敲,大膽刪改,要合理的甄選每一條觸動人心的功能點。緊密關注特定任務,關注少數(shù)幾個用例,留下那些用戶切實需要的用來完成任務的少數(shù)功能點。(這是因為移動設備有些不足點--難以抓住用戶的注意力和時間,不大的分辨率,吃緊的內存,緩慢的處理器。你每添加一個功能點,都是在搶奪這些資源,添加了過多的功能點就會拉低應用的體驗。冗余的功能讓界面變得混亂,任務流變得冗長。功能過多只會導致運行緩慢不堪。)最開始你就要確定應用的最關鍵一項任務是什么,接著回到根據(jù)“五要素”提煉出的最重要的用例上,然后確定用戶需要頻繁完成的任務,抓住相應的用例。(待辦事項管理型應用的關鍵任務是添加新事項,日歷管理的是瀏覽日程。)一旦確定了關鍵任務,接下來所有的設計工作都將圍繞這些點展開,你要認真考慮你的應用如何才能幫助用戶在匆忙中完成微任務。次任務會在考慮主要行為時很自然的浮現(xiàn)出來,別把次要功能做的太復雜,找出能實現(xiàn)想法的最低要求,然后再進行優(yōu)化,提高它的使用效率。(如在待辦事項管理器中添加事項時就能想到查看、編輯和標記完成的功能。)精選需求點,挑選出大多數(shù)用戶大部分時間都需要的功能,,別糾結于小眾群體的邊緣需求。先對你的受眾有個清晰的感覺,方可為這些用戶削減你的功能,要注意你是否能根據(jù)用戶對你應用的期望給出最少的功能點,即“夠用就好”。
f.做網(wǎng)站的附屬應用時,要想著如何在移動網(wǎng)站山做改進,而不是全盤照搬原網(wǎng)站。以下是幾點秘訣:(1)高效是功能之一。移動場景中,最重要的用戶需求之一就是使用高效。(2)本地應用能更優(yōu)美的展示內容。應用為手機屏幕所設計,能提供優(yōu)美動感的控件,優(yōu)美的界面能超越移動網(wǎng)站。(3)暫留先用(存放離線內容)。應用相比于移動站點來說,應用可以預存內容以備離線閱讀。(如有些新聞類應用就可以在有網(wǎng)絡時抓取并預存下所有最新的文章,以備在網(wǎng)絡盲區(qū)閱讀。維基百科中的“列隊”功能。)
2、為尺寸和觸摸設計
a.人類工程學問題:要考慮你應用的手感。你的界面在單手把持的情況下是否還能使用?拇指是否容易點到常需點擊的元素?如果是左撇子呢?按鈕是否夠大,容易點擊?是否需要絲毫不差才能點中?iPhone的交互隱喻全都和點擊、滑動以及輕拂有關。應為這種拇指點擊的方式優(yōu)化你的設計。
b.要將主操作放置在拇指的“點擊熱區(qū)”中。雖然拇指能滑到整個屏幕,但只有三分之一的屏幕是真正容易觸及的--也就是拇指正對的區(qū)域,為了獲得人類工程學上的舒適體驗,你應將主點擊目標放置在方便拇指點擊的熱區(qū)中。這就是為什么工具欄和標簽欄一般都放在手機屏幕的底邊,這個點擊區(qū)域也給了我們提示,該如何組織好點擊目標的視覺層次。常用的按鈕還有導航標簽應該放在屏幕底部的左邊,不常用的按鈕還有會改變數(shù)據(jù)的點擊目標可以很安全的塞在右上方去。(如可以改變、刪除、排序列表項目的“編輯”按鈕一般放在右上角可以減少誤點的發(fā)生)要根據(jù)你應用最常發(fā)生的用例來排布頁面元素,引導點擊。包括按鈕和列表項在內的很多iPhone標準控件,都會橫跨整個頁面,平等的對待了左右手拇指。只要空間允許,最好是用通欄控件。
c.44是個神奇的數(shù)字。確保點擊區(qū)域至少有44像素(這是手指按壓屏幕所觸及的范圍)大小,然后基于44像素的設計韻律進行設計。元素的大小時常影響著交互設計,定義好每個可點擊元素的大小十分重要。行為越重要,越頻繁,相關的目標就要做的越大,所以大按鈕靠譜。理想狀態(tài)下,所有的按鈕或點擊目標最小都應該保持44*44像素,但這并不是說你看到的點擊目標一定要這么大,其實還包括了按鈕自身延伸出的整個點擊區(qū)域。當有限的控件壓縮了點擊目標的時候,實在沒有辦法只要能保證點擊目標的高或寬之一是44像素,你可以將另外一條邊壓縮成至多30像素,即實際上,所點擊目標的最小尺寸是44*30像素。
d.大膽使用空白,不要讓你的設計顯得擁擠不堪。按鈕大小并不是唯一決定點擊精度的因素,你還得考慮按鈕間距。當你的應用在屏幕底部使用標簽欄來切換模式或視圖時,操作系統(tǒng)會自動幫你分配好標簽與標簽之間的空間,并將數(shù)量限制到5個(不會限制死5個,但是iPhone不推薦標簽欄圖標超過5個。)在頁面底部要給手指留有空間,當目標離應用的標簽導航欄太近時很容易誤點。如果你不得不在標簽欄和工具欄旁邊放置點擊目標的話,務必保證目標夠大。
e.所做之處,都要讓主內容在上,操作在下。(將重要的信息放在頂部,將重要的操作放在底部)最重要最常見的信息應該放在應用主要按鈕和操作的上面,屏幕的頂部--新聞頭條一般在頂部,且符合我們操作任何現(xiàn)實設備中的方式。屏幕底部是掌上設備拇指點擊最舒適的區(qū)域,但也是最容易被手擋住的區(qū)域。為了方便看清信息,信息應該擺放在你應用操作的上方。
f.主操作要容易夠著,在切實可行的情況下避免使用滾屏。質疑滾屏,如果一屏之下能合適的放下所需內容,那就盡量不要使用滾動。如果信息不在中央,那用戶很有可能看都不看。滾動需要腦力加體力,要多一次思考,多一次滑動,設計師要消滅多余的腦力勞動和體力勞動。讓用戶一眼看完一屏里的所有內容,可以讓他們能關注內容,而不用費神去想屏幕下邊會是些什么。消滅滾屏只不過是一條容易執(zhí)行的設計策略,而不是目的,只要你應用的內容需要,該用滾屏的時候還是要用。滿屏的信息會給你的用戶帶來操作負擔和理解負擔,但并不代表為了保持界面美觀易懂你就一定要舍去詳細信息,而是要將復雜的東西做的看起來并不復雜。正確的質疑滾屏就是讓你認識到不能將所有信息放在一個頁面上。優(yōu)秀的應用會簡單的給出需要知曉的大局信息,然后,用戶可以用點擊不同的地方來“提問”,獲取更多的相關信息。(只要身體上的舒適程度的話,點擊手勢要比滑動滾屏來的容易。)比點擊數(shù)量更重要的是點擊質量。每次點擊后,用戶得到的越多,點擊質量就越高,多點幾下也就還好。而且大部分時候,多余的點擊比長長的滾屏負擔要少。只要你將最重要的工具和信息放置在了主屏,你就可以放心的把次要內容放在其他視圖里。只要分清了主次,用戶瀏覽非滾屏頁面就不用忙于掃視、定位內容的位置。在非滾屏的頁面上,每次訪問內容和操作總是保持在原來的位置上,這樣用戶就更容易在應用里暢游,獲取所需信息,而不用停下來思考。即使是長文本,也有創(chuàng)新方式可以替代滾屏(如讀書應用里的翻書隱喻來替代滾屏)。滾屏是某些應用不可獲缺的操作,待辦事宜、文章、郵件不可避免會很長,而且滾屏常常是查看這類長內容的最佳方式。當你的應用要用滾屏時,要確保應用的主要操作能固定在屏幕上。
(界面上的所有操作應該都是大部分受眾最常用的功能,要冷眼看待每個按鈕和圖標:這個元素會不會被用戶注意到?用戶是否看得懂這個元素的含義?元素是不是有意義?每個工具都要與近旁的主要任務緊密關聯(lián),附屬功能和附屬內容要放到次屏中,或全部剔除。文本標簽要簡練,語句不拖沓。屏幕上每個元素都會消耗用戶的認知成本,每個元素都會減慢視線掃描,減緩理解時間和決策時間,別讓用戶思考。)
g.用“秘密面板”、“隱藏之門”將高級工具分散到次級視圖中。通過這種方式來減少邊框界面。如果你的應用要滿足受眾更高級的要求,基本上你就要在應用上額外加些新功能、新工具還有新內容,但是盡量讓額外的界面讓路于主內容。虛擬鍵盤(如推特發(fā)微博輸入文字時隱藏在鍵盤后的更高級功能)和滑動面板(如新聞類應用屏幕底部出現(xiàn)約50像素的廣告橫幅)能讓你的應用來回切換界面,展開新工具、新內容。觸發(fā)秘密面板的元素(開啟面板的線索)在視覺上必須要有清楚的標識,至少還要放在正關注的內容旁邊,這樣就能提示用戶還有其他操作可做。
當你開始計劃設計應用時,先從大局層面上組織設計--考慮它到底要干什么,而先不要顧慮太多細節(jié)(按鈕、顏色、圖標等)。應用基礎的操作就是基于頁面間簡單的移動,每張頁面都完成一個任務或展示特定內容,關鍵在于如何串起這些頁面。理解好標準導航方式和控件會讓用戶更加習慣你的應用。
3、蘋果的導航模型
a.平鋪頁面:沒有信息層級,沒有組織結構,就像一疊卡片(有時就一張)。這種方式很適合于瀏覽并發(fā)現(xiàn)方式,慢慢瀏覽查看同樣類型不同內容的頁面,適合在實用工具應用中使用,通常視覺精美,沒有滾屏。為了讓大家在瀏覽這疊頁面的時候能保持方向感,平鋪頁面應用的底部添加了標準頁面控件,即那一排小點。小點的數(shù)量代表了頁面的數(shù)量,控件提示了用戶你目前所處的位置。分頁控件只讓你每次翻過一頁,而不能直接跳轉到某個小點所對應的頁面。所以在使用這類模型時,要控制好頁面數(shù)量,要想把平鋪頁面作為主導航并用的好,一般頁面以不超過10個為宜。平鋪頁面模型無法直接跳轉到特定頁面的弊端,使其并不適用于功能或內容結構相差懸殊的應用。在平鋪頁面里,滾屏更不可取,這是因為頁面分頁控件黏附于屏幕底部,會突然間截斷滾屏內容。且如果添加了滾屏,橫豎兩個方向均可滑動,當上下滑動頁面的時候,滑動方向不小心帶點斜度卻把下一張給滑了進來。兩個方向的滾屏需要更多的精確度,所以也需要用戶付諸更多的努力。
b.標簽欄。標簽欄就是在屏幕底部的一組用來在應用主功能之間切換的按鈕。按蘋果標準代碼創(chuàng)建的標簽欄顯示在屏幕的底部,高度是49像素,每個按鈕都包含一個文本標簽和圖標,限定最多5個按鈕。標簽欄最大的優(yōu)勢就是讓你應用的主要功能展示在明顯的地方。標簽欄要避免出現(xiàn)“更多”按鈕,避免重要功能被用戶忽視和增加額外的點擊。如果發(fā)現(xiàn)應用的導航分類超過5個最好用適合于數(shù)量較多的分類結構--樹形結構的導航。
c.樹形結構(表格視圖列表)。樹形結構對管理一大摞的分類項目來說非常合適(如管理郵件、待辦事宜和聯(lián)系人等),還可以用樹形結構來展示功能集合。樹形結構的導航占用很少的界面空間,而且內容本身就是操作,不但節(jié)省很多空間,還為用戶節(jié)省了多余的思考。
d.組合使用導航。有個很常見的設計模式是,使用標簽欄導航來組織應用的主要功能,然后在某幾個標簽下又添加樹形結構導航。平鋪頁面導航也能類似的嵌入到應用的二級頁面中。
4、一張頁面臨時取代了整個應用的顯示屏,這種處理方式稱為“模態(tài)視圖”。這種處理方式會暫時繞開應用的正常操作。模態(tài)視圖的作用就是暫時繞開當前操作。? ? 如果你在應用中使用了某種導航模型,那么模態(tài)視圖就像是導航模型中的死胡同--滑出一個單屏,編輯、查看、操作頁面上的內容。(“模式”就是一種與往常不同的應用行為的特定形態(tài),一般帶有流程中的界面變更的情況發(fā)生。)模態(tài)視圖時暫時劫持應用正常操作的界面,這個模態(tài)視圖會飛入現(xiàn)有的屏幕,讓你去完成和頁面內容相關的一些任務。有些控件和界面元素只有在次要任務中偶爾被用到,而模態(tài)視圖很巧妙的將這些控件和界面元素暫時藏起。應用正常的頁面瀏覽切換方式一般是左右滑出,而模態(tài)視圖是從底部出來,覆蓋現(xiàn)有的頁面。(這種彈出方式在微妙間,強化了模態(tài)視圖在流程上屬于臨時支路的形象。)為了讓用戶能方便的從模態(tài)視圖中回到正常流程,所以除了在模態(tài)視圖中加上必要的按鈕和空件之外,還要加上“完成”或“取消”按鈕。(在瀏覽器中用來改變或分享內容的工具,都通過模態(tài)視圖的方式彈出。,如輸入網(wǎng)址時出現(xiàn)的虛擬鍵盤,彈出的“書簽”讓你找到之前保存過的頁面等。)
5、創(chuàng)建應用前先畫好應用頁面的流程圖,要確保頁面能清晰、有條理的串在一起。路徑上每張頁面都應該只做一件事情、完成一項任務或查看一種內容元素。你的草稿只要說個大概:需要哪些頁面,每張頁面上有什么操作,還有頁面上的工具和內容的大致比例。此時你要做的就是組織好你的頁面和任務優(yōu)先級。
6、在概念階段,最重要的就是:你要解決什么問題?你面向的受眾是誰?他們又有什么期望?了解用戶的心智模型,也就是了解用戶需要應用來解決的問題是什么。用戶不會糾結技術的背后工作原理,對于他們來說精力應該花在任務和目標上,用法該一目了然。