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