【文章內(nèi)容簡介】 方式對比可見，觸屏手機基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 11 頁 共 48 頁 與電腦的使用方式之間有著極大的差異，不同的操作方式也將導(dǎo)致設(shè)計時需要考慮不同的因素，其使用體驗也將不同。 場景需求對比 ： 隨著手機的普及，幾乎人人都會有一部手機，使用手機的場景隨處可見，而幾乎隨時隨地都會使用到手機。并且使用手機應(yīng)用服務(wù)的場景相當(dāng)比較分散，不同于使用電腦的用戶集中于空閑時間。移動互聯(lián)網(wǎng)用戶除了在等待時間、乘坐交通工具時間時使用手機外，睡覺前、上課與上班時使用的比 例也很高。 圖 在公車上使用手機 而由于硬件與操作的關(guān)系，使用電腦的場景則更多的是發(fā)生在家里、辦公室甚至咖啡廳等等固定的地點。 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 12 頁 共 48 頁 圖 在家里使用電腦 ： 從移動互聯(lián)網(wǎng)的概念提出之前的很長一段時間，人們使用手機還停留在打電話、發(fā)短信、聽音樂、看視頻、看小說與打小游戲等等相對比較單純的功能。 使用電腦時所做的則相對豐富很多，看新聞、看電影與打大型游戲等等都可以做到。 ： 圖 移動互聯(lián)網(wǎng)新型產(chǎn)品 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 13 頁 共 48 頁 隨著移動互聯(lián)網(wǎng)越來越火爆，科技發(fā)展得越來越迅速 。人們的需求也越來越復(fù)雜，其中涌現(xiàn)了一系列優(yōu)秀移動應(yīng)用產(chǎn)品。如今的產(chǎn)品需求正朝著查看附近的情況（ LBS）、基于商務(wù)的 O2O 應(yīng)用與社交 SNS等等方向發(fā)展。 而電腦方面，社交 SNS 與搜索領(lǐng)域則越來越火爆，其中，電子商務(wù)領(lǐng)域發(fā)展迅猛，網(wǎng)絡(luò)購物變得越來越便捷。 綜合而言，手機與電腦的使用特點差別非常大。使用移動應(yīng)用時，容易受到周邊環(huán)境、設(shè)備握持姿勢等許多因素的干擾，但是使用電腦類應(yīng)用時，最大的干擾往往來自于應(yīng)用與應(yīng)用之間的相互影響。并且手機使用應(yīng)用的累計時間更短，但是由于使用場景比較固定，使用電腦應(yīng)用時時間更長。并且由于手機便于攜帶的原因，手機應(yīng)用相對于電腦的即時性更強，比電腦的使用頻率更加頻繁。 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 14 頁 共 48 頁 第四部分 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計原則研究 適配原則 如今的手機屏幕尺寸越來越大，但是最大也不過 寸，相對電腦來說還是相差甚遠(yuǎn)，因此在如此狹小的屏幕上做設(shè)計是個很大的挑戰(zhàn)。所做的產(chǎn)品設(shè)計不僅要針對小屏幕設(shè)計高效的交互效果，還需考慮操作行為，比如要靠手拿著，靠手指操作等。 首先要做的就是省去多余的文字，句子里不應(yīng)該夾雜太多文字。就像 Krug 可用性第一定律所講的：“去掉每個頁面上一半的文字，然后把剩下的文字再去掉一半”。 圖 人人網(wǎng)與 Chrome 瀏覽器的注冊頁面對比 如圖 所示人人網(wǎng)的注冊界面很好的將服務(wù)條款與注冊賬號界面結(jié)合，整整節(jié)省了一個頁面。賬號與密碼提示以淺色顯示在輸入基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 15 頁 共 48 頁 框中，避免了不必要的空間浪費，整個頁面沒有任何多余的文字。 圖 團 800 與 360 團購的首頁頁面對比 如圖 所示，團 800 首頁將其所有功能元素放在首頁中，導(dǎo)致各個元素之間相隔很近，很容易誤點擊，極易增加用戶的挫敗 感；而360 團購很好地將幾個元素整合后分布到四個標(biāo)簽導(dǎo)航內(nèi)，使每個目標(biāo)的可點擊范圍夠大，很好地節(jié)省了屏幕空間。 44 像素 圖 使用 44 像素的區(qū)域 蘋果公司將指尖點擊目標(biāo)大小定義為 44 像素，任何應(yīng)用的按鈕都不能低于這個標(biāo)準(zhǔn)，這里的指的是可點擊的范圍，視覺看到的目標(biāo)基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 16 頁 共 48 頁 可以再小一點。這個標(biāo)準(zhǔn)也逐漸成為業(yè)界的標(biāo)準(zhǔn)。 專一原則 如今的手機應(yīng)用數(shù)以萬計，僅蘋果公司的 app store 就有近百萬的應(yīng)用，而其中也有導(dǎo)航、工具、體育、娛樂等幾十種分類。雖說市場上的同類產(chǎn)品很多，但這些產(chǎn)品大多張牙舞爪 地四處掠地，恨不得把所有應(yīng)用功能集于一身。但是最受歡迎的應(yīng)用往往是功能最專一的應(yīng)用，正所謂術(shù)業(yè)有專攻，唯有專心做好自己的根本工作，滿足用戶的核心需求才能成功。 圖 有道翻譯官應(yīng)用首頁 如圖 所示的有道翻譯官的功能很簡單，滿足用戶翻譯語言的需求，整個應(yīng)用沒有任何其他多余的功能，哪怕是新用戶也很容易上手使用。 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 17 頁 共 48 頁 主次原則 由于手機屏幕有限，不可能一下子將所有產(chǎn)品功能全部展示出來，如同電腦端的軟件一樣，對于任何應(yīng)用的操作都存在主次之分。 如圖 所示的人人網(wǎng)首頁中的說話、發(fā)狀態(tài)、傳照片、報到功能是重要功能，并且屬于相同等級，而找人、聊天、查看好友等功能屬于次要功能，因此需要點擊設(shè)置后才會展現(xiàn)。 圖 人人網(wǎng)應(yīng)用首頁 由于內(nèi)容比較多，空間比較少，所以需要主要的內(nèi)容先顯示，次要的內(nèi)容藏在“更多”里。當(dāng)面對很多操作的時候，也要分清主次關(guān)系，注意哪些是希望用用戶去做的，經(jīng)常做的，哪些是不希望用戶做的，不常做的，而對于希望用戶去做的操作還要進(jìn)一步分清主次關(guān)系。 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 18 頁 共 48 頁 圖 360 云盤登錄頁面 如圖 所示，登錄與注冊功能屬 于同級別功能，但是由于是登錄頁面，因此登錄鍵顏色加深，而立即登錄與忘記密碼屬于同級別功能，但是立即登錄是希望用戶去做的、常用的功能，所以“立即登錄”做成了顏色明亮的按鈕；而忘記密碼是不希望用戶去做、不常做的功能， 所以使用了顏色相對弱化的文字鏈接的形式。 要考慮清楚應(yīng)用的主次關(guān)系，取決于需要重點引導(dǎo)用戶操作的功能與通過用戶研究與數(shù)據(jù)分析得出的功能相結(jié)合。 簡潔原則 大部分的手機應(yīng)用都符合二八法則，即最重要的功能只占其 20%，而其他的 80%都是次要的。具美國某權(quán)威機構(gòu)的研究報告稱 64%的軟件功能極少使用過甚至從未使用過，因此通過大膽刪除的方法可以有效地簡化設(shè)計。 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 19 頁 共 48 頁 但是在刪除一些功能之前一定要仔細(xì)評估其重要性，避免刪除掉本該有用的功能，不能隨便刪除，要總攬全局，找到最重要的功能實現(xiàn)給用戶，而對于無用的功能設(shè)計可以大膽摒棄。 多余的操作會使用戶煩躁，因此刪除一些無用的設(shè)計顯得至關(guān)重要。如圖 所示的應(yīng)用注冊過程中在提取用戶的生日時自動推算出年齡，減少了用戶的多余操作，是大膽刪很好的實用例子。即使是很小的錯誤也會導(dǎo)致用戶煩惱，在對手機應(yīng)用做產(chǎn)品設(shè)計的時候要時刻為用戶著想，盡最大可能避免用戶 犯錯誤，消除錯誤也是刪除設(shè)計的一部分。該應(yīng)用使用了滑輪的方式，避免了輸入時產(chǎn)生的錯誤。 圖 遇見應(yīng)用注冊頁面 對產(chǎn)品功能重新組織是產(chǎn)品設(shè)計的常見方法，但是在組織功能的時候往往會遇到很多問題，要考慮尺寸、視覺色彩、形狀、功能搭配等，所以這時做組織的時候要有一個權(quán)重，只強調(diào)幾個主題，按照這幾個主題去組織，主題太多會擾亂用戶。重要的、相同功能類型的放基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 20 頁 共 48 頁 在一個模塊，按模塊去組織。 圖 舊版人人網(wǎng)應(yīng)用首頁 如圖 所示，人人網(wǎng)將其應(yīng)用的所有功能很好地進(jìn)行分類，分成了拍照、傳照片 、寫日志、發(fā)狀態(tài)、新鮮事、個人主頁、好友、地點、消息與站內(nèi)信 10 個模塊。用戶可以很輕易地理解每個模塊的意義，信息架構(gòu)很清晰。 多余的功能設(shè)計應(yīng)該摒棄，但是有些不常用但是又必須存在的功能就只能使用適當(dāng)隱藏的方法了。 如圖 所示該應(yīng)用由于需要獲取許多用戶資料才可完成注冊，因此將整個過程拆分成 3 個步驟，將繁多的錄入操作很好地隱藏起來，使用戶感覺不到煩躁。 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 21 頁 共 48 頁 圖 遇見注冊頁面 適當(dāng)?shù)仉[藏功能可以很大程度簡化產(chǎn)品設(shè)計，但是切記要精準(zhǔn)控制隱藏，要是用戶需要時能夠找得到，否則 效果會適得其反。隱藏很重要，適時出現(xiàn)也很重要。如圖 微信首頁所示的刪除按鈕只有在用戶橫滑頁面才會出現(xiàn)，這樣的設(shè)計防止了用戶不必要的誤點擊，但是當(dāng)用戶需要刪除時，又可以很快地找到。當(dāng)然還有搜索框的顯示問題，由于搜索框平時并不常用，當(dāng)首次登錄時并不會顯示搜索框，唯有將整個頁面下拉，搜索框才會出現(xiàn)。 圖 微信首頁 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 22 頁 共 48 頁 該方法用于手機與電腦設(shè)備之間的轉(zhuǎn)移最為多見。該方法可將較為重要但簡單的功能用于手機端，然后將更為復(fù)雜的操作交給電腦端去處理。任何的設(shè)備都有自己的不足，移 動設(shè)備更適合輸入少量文本、顯示少量信息、傳輸速度慢、隨時精確確定地理位置等等，而桌面設(shè)備則恰恰相反。注意將正確的功能放到正確的設(shè)備上去顯得尤為重要。 如圖 所示， 360 手機助手聰明地抓住了手機網(wǎng)絡(luò)下載速度慢這一需求，將下載的任務(wù)轉(zhuǎn)移給電腦端，將下載好的任務(wù)再傳給手機，實現(xiàn)了靈巧轉(zhuǎn)移。類似的應(yīng)用還有 360 云盤，可以將手機上的資料同步到互聯(lián)網(wǎng)，然后由電腦端訪問處理，都是同樣的道理。 圖 360 手機助手電腦版與手機版 靈巧轉(zhuǎn)移的精妙之處就在于將適合的任務(wù)交給適合的設(shè)備去做，進(jìn)而減輕原先設(shè)備的負(fù) 擔(dān)，起到簡化功能的設(shè)計。 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 23 頁 共 48 頁 反饋原則 圖 UC 瀏覽器打開網(wǎng)頁狀態(tài) 如圖 所示的瀏覽器打開頁面時的進(jìn)度條可以很好的反饋給用戶此時的網(wǎng)頁下載進(jìn)行的程度。從心理學(xué)的角度來說，時間是相對的，事情發(fā)展得快慢取決于周圍環(huán)境，取決于視覺的分散程度。即使網(wǎng)頁打開得總時間不變，但是用戶的心理感受會顯得網(wǎng)頁打開得更快。類似的情況還有俗稱的“菊花轉(zhuǎn)”、程序啟動時的閃屏等等，可以表示該程序正在正常運轉(zhuǎn)，給用戶一個很好的反饋，使用戶不會煩躁。 反饋原則在產(chǎn)品設(shè)計中有時就像是人與人之間的對 話一樣，當(dāng)某人說出一句話是必然希望對方會有怎樣的回應(yīng)。用戶每做出一個操作，都希望能及時收到信息的反饋。因此，讓用戶時刻清楚自己此時的狀態(tài)、自己的每一步操作都顯得十分重要。 基于 IOS、 Android 手機設(shè)備應(yīng)用程序交互適配設(shè)計研究報告 第 24 頁 共 48 頁 大多數(shù)人在做一件事的時候都不希望被人打擾，如果是因為無關(guān)緊要的小事，更會使用戶煩躁。因此在進(jìn)行手機應(yīng)用設(shè)計的時候要謹(jǐn)慎使用警告框、提示框、推送通知等等，因為此類操作會經(jīng)常打斷正