起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識走近移動設計——硬件設備篇
從磐石一般的臺式機，到可移動的筆記本，再到手機，一個能永遠攜帶的硬件設備，開啟了一個屬于個人的新媒體時代。生為無線領域的設計師，需要對手機各方面有清晰的認知和理解。上一篇，我們熟悉了移動環境的應用場景，這一篇我們將進入更小的環境——硬件設備，來看看它將給我們設計上帶來什么樣的驚喜。
同樣，我們從一個有趣的問題開始，走近移動設計之旅的硬件設備篇。問題：手機攝像頭能干什么？我們日常中最常用的是拍照，錄視頻，視頻通話，掃描條形碼、二維碼。
如果你發現攝像頭還能干下面圖中所示的各項，像截屏，屏幕操控，測心跳，臉部識別，測距離等等，是不是感覺到很驚訝。但確實這些功能手機攝像頭都能做到，甚至還有更多我們還未想到的功能。
空間容量
Web設備：空間容量大
移動設備：較為有限，插卡
設計啟示：產品大小，緩存處理…
對于空間有限的手機來說，產品的應用大小是用戶必然考慮的一個問題，特別是一些大型游戲。是不是游戲下載多了，突然系統彈出提示，告知手機磁盤空間不夠了。這時候你就會挑選那些特別占用空間的應用刪除了。是不是應用中瀏覽太多的圖片，感覺機器慢了，同時這時候圖片也占用了你更多的空間。每個應用都有設置緩存空間，超過了就會覆蓋。清除緩存，不僅僅是空間的釋放，也會讓手機更流暢。所以需要的時候，設置清除緩存的入口，讓了解的用戶敢于各種預覽。
硬件按鈕
Web設備：產品主要通過瀏覽器呈現，基本布局一樣
移動設備：手機硬件與平臺的多樣性，應用客戶端和瀏覽器產品并存
設計啟示：手機硬件按鈕，了解平臺的規范，了解瀏覽器特點…
每個平臺都有自己的硬件特性，所以了解平臺規范，是手機設計師必須要經歷的。同樣了解簡單的按鍵也是特別需要的，比如iPhone只有一個按鍵，單擊返回主桌面，雙擊出后臺運行應用。Windows phone有返回，搜索和返回主界面按鈕，andriod有菜單，返回主界面和返回按鈕，這些按鍵都直接影響應用的信息架構設計。
具有跨平臺的瀏覽器手機頁面的設計，也是需要了解各個瀏覽器的特性的?，F在主流的瀏覽器，包括andriod和ios自帶的，uc和QQ瀏覽器。Uc和QQ瀏覽器的左右滑動，是與前進和后退匹配的，還有全屏模式下各自的特點，這些特性都將影響到我們在產品設計時候的框架。
鼠標&手指
Web設備：鼠標，可以精準到1個像素的點擊
移動設備：手指，44ppi的模糊點擊
設計啟示：為拇指而設計，底部原則，邊緣原理，點擊區域，操作反饋…
隨著iphone重新設計了手機，iphone的經典觸屏和多點觸摸基本就成了現在手機的標配。我們瞬間從鼠標按鍵和觸控筆時代進入了手指直接觸控時代。所以，對于移動設計來說，判斷應用是否好壞的衡量標準，不再只是應用本身的架構，也在于設備與人本身操控的友好程度，這就需要設計師對人機工程有更多的了解。人機工程，是一門重要的工程技術學科，是研究人和機器、環境的相互作用及其合理結合，使設計的機器和環境系統適合人的生理、心理等特點，達到在生命中提高效率、安全、健康和舒適目的的一門科學。移動觸屏手機的誕生，讓我們與屏幕有了直接接觸，也帶來了更豐富的手勢操作。但與鼠標能精準到1個像素的點擊相比，手指的觸點有著相對的不穩定性和區域的要求。不好的設計，將帶來嚴重的操作挫敗感。
為拇指而設計
上圖是我們日常使用手機的一些情況?？梢钥偨Y為如下六種持機方式。這些方式都將直接影響產品的信息架構的友好程度。
當然實際情況中還存在更多的握法，但這六種是具典型代表性的。其中單手持機又占了更大部分。這就讓我們更加考慮為拇指而設計的概念。
使用拇指進行操控，是我們使用手機最常用的方式。寒冷的冬天，你吝嗇的只拿出一只手，握著手機打發時間，不是等人就是等車。擁擠的交通上，你不得不抓緊拉手，同時還開著手機看八卦和小說。一個電話，一條短消息，預覽內容，拿起放下，我們都習慣了一只手來處理這些簡單任務。這些任務都是由我們的拇指來進行的，所以觸屏手機的界面交互方案是要著重考慮拇指這個點的。已有研究證明，當右手持機，拇指的有效的觸控區域如下：
何為有效，能靈活觸碰，能減少誤操作。不要讓用戶在觸碰的時候感覺到費力，不要讓用戶需要調整持機的方式，為了一個點擊。這些人機交互方式，都將體現在我們的界面設計中，請考慮將重要的功能元素放置在這個范圍內。從各個移動平臺的操作系統來看，頁面重要的工具欄，還有標簽欄均處于這個位置，也是考慮到這個點。所以設計信息架構的時候，必然要考慮到拇指的影響力。
底部原則
同時，設計的底部原則也有來自于拇指的有效觸控區域，還有一點，也來自于對內容和反饋的少干擾。傳統的web界面布局，導航和重要功能點都在頁面上部，我們在操控鼠標的過程中，顯然不會對內容和反饋有所遮擋，但如果在小屏幕的手機上，操作頁面上部分內容的時候，頁面中會有大部分內容會被遮擋住，包括點擊后的頁面反饋有時候也不能及時看到。
邊緣原理
還有點，需要利用好手持設備的邊緣。Windows平板就是大量的利用了邊緣原理。微軟的菜單欄和蘋果系統的菜單欄的點擊效率，就有很大的區別。號稱蘋果的菜單欄設計比微乳的效率高了20%，就是利用了邊緣的原理，讓用戶移動鼠標和點擊更直接方便。
chrome瀏覽器不僅僅是性能好那么簡單，他的tab也是利用了邊緣原理，讓用戶選擇切換的成本更小。
屏幕邊緣可以理解為無限大，充分擴張了用戶的實際操作范圍。Andriod和ios手機的消息中心，就是利用了邊緣原理，是不是大家在操作的時候，很少出現誤操作。因為我們一般都會從屏幕的外部開始滑動進來，與屏幕內其他操作基本不會觸碰到。還有點，這里是拉動的設置，應用大部分在這個區域是點擊，所以動作上是不一樣的，避免了誤操作的可能。
所以，善于利用邊緣原理，可以將我們的點擊效率和誤操作得到更好的改善。
點擊區域
誤點擊和視差，決定了需要更大的點擊區域。因為屏幕的玻璃厚度，有一定的視覺差，造成點擊的錯誤。所以大部分的點擊區域往往比我們看到的要大的多。設計的時候最好標注好大小的區域。
手指讓我們跟產品更接近，操作更便捷，但沒有了鼠標那種點擊陷下去和滴答聲，所以需要更直接的反饋，來告訴用戶已經操作成功?？梢酝ㄟ^多態按鈕，聲音提示和震動等等。
鍵盤
Web設備：有鍵盤，物理彈性的鍵盤，可以讓我們隨心所欲的長篇大論
移動設備：小屏幕內的虛擬鍵盤，只有半屏的輸入空間，小按鈕，晃動的屏幕
設計啟示：避免輸入，默認值，記錄歷史，轉化輸入方式，關聯詞…
避免輸入，使用語音
碎片化的時間，不穩定的環境，讓我們很難心平氣和的在一個小屏幕下，仔細的按著那一排小按鈕，然后還要時常按錯按鍵。越多的輸入，只會讓用戶對產品的認可度更低。所以，避免輸入，轉換輸入方式，能提升產品操作的流暢度。Uc的語音搜索，微信的語音聊天。
轉化輸入方式
傳統的價格篩選，就是最簡單的文本框輸入
后來很多設計就改變了這樣的方式，通過區間滑塊，讓用戶通過簡單拖拉就能實現區間值。
記錄歷史
默認記憶成功輸入信息，讓系統完成信息記憶，減少輸入。比如登錄，
關聯詞
搜索的聯系詞，搜索歷史記錄，這些都是減少輸入的方式
傳感器
Web設備：傳感器。。。沉默。。。
移動設備：手機傳感器包括定位系統，重力傳感器，距離傳感器，光線傳感器，方位傳感器，陀螺儀，磁力計，氣壓、溫度傳感器。。。
設計啟示：利用好手機傳感器，能讓設計更有趣，更有創造力。
距離傳感器
隨著iPhone的誕生，催促著新一代智能手機在傳感器上的全面應用，讓手機的體驗和互動達到了一個新的層面。我們在接聽手機電話時候，將手機靠近耳朵，這時候背景等就會自動熄滅。一方面防止觸屏與臉部接觸的誤操作，另外一方面也是節省電量。拿開手機的時候，背景燈又自動亮起，這些都是距離傳感器在起的作用。我們也想過利用距離傳感器跟產品做結合，傳達各種溫馨的效果。
手機屏幕小，商品的搜索結果頁一般都是列表模式。用戶在一些惡劣環境（如公交車上），或則因為視力不好，為了看清楚商品圖，往往非常近的靠近屏幕。如同我們看書時，因為字太小，而不得不更靠近書本。當用戶較長時間瀏覽商品結果頁，容易傷害到視力，引起眼疲勞。也增加了更多輻射的機會。這時候就可以利用距離傳感器來判定，設置用戶在太靠近屏幕的一定時間內，提示用戶危害，將屏幕遠離自動切換到大圖模式。
重力傳感器
開會中，突然想起手機鈴聲，是不是很多人都手忙腳亂怎么關閉聲音？如果這時候能翻轉手機，變為靜音，是不是特別自然和直接。這里就可以利用重力傳感器。搖一搖，尋找附件的人。搖一搖，換首歌曲。手機重力感應器在產品中的運用已經越來越廣泛，支持搖晃切換各種界面和功能。
定位系統
Nike+的跑步應用，可以記錄跑步過程中的各種數據，最有意思的是，它根據定位系統，記錄你跑步的路線和距離。如果此應用可以再發展一下，跑步的過程可以直接展示在另外一臺手機上，你是不是就想在家就可以監督該鍛煉的那位了。
方位傳感器
地圖的應用，在手機上基本都有配置。在一個陌生的地方，方位傳感器對一個方向不明了的人來說是非常重要的。
作為移動設計師，需要了解手機基本的傳感器有哪些，用途有哪些，很多游戲就應用了各種傳感器來豐富可玩性。
內置設備
Web設備：傳統pc外接各種設備
移動設備：攝像頭，閃光燈，麥克風，多點觸摸
設計啟示：組合應用，各種想象。
一款戒煙的應用，如下圖所示，無論屏幕是橫著還是豎著，煙都自然的朝上方騰起，當對著麥克風做吸氣，會模擬吸煙的效果，煙頭變亮，時間久了還有煙灰，抖一抖可以掉了，是不是很有趣。這里就是利用了，重力傳感器和麥克風的組合效果。
再看一款吹笛的應用，如下圖。也是利用了重力傳感器來調節重低音，還有麥克風及屏幕的多點觸摸。
口袋體檢應用，如下圖，就是利用了攝像頭和閃關燈的組合，發現指尖細微變化來分析心率，根據測試數值實時顯示心跳數值。
還有更多的應用，都是利用了傳感器和各種內置設備在組合，來創新產品。
來源：一淘UX
最近在做APP，剛好用到！