從磐石一般的臺式機，到可移動的筆記本，再到手機，一個能永遠攜帶的硬件設(shè)備，開啟了一個屬于個人的新媒體時代。生為無線領(lǐng)域的設(shè)計師，需要對手機各方面有清晰的認知和理解。上一篇，我們熟悉了移動環(huán)境的應(yīng)用場景，這一篇我們將進入更小的環(huán)境——硬件設(shè)備，來看看它將給我們設(shè)計上帶來什么樣的驚喜。

同樣，我們從一個有趣的問題開始，走近移動設(shè)計之旅的硬件設(shè)備篇。問題：手機攝像頭能干什么？我們?nèi)粘Ｖ凶畛Ｓ玫氖桥恼?，錄視頻，視頻通話，掃描條形碼、二維碼。

如果你發(fā)現(xiàn)攝像頭還能干下面圖中所示的各項，像截屏，屏幕操控，測心跳，臉部識別，測距離等等，是不是感覺到很驚訝。但確實這些功能手機攝像頭都能做到，甚至還有更多我們還未想到的功能。

空間容量

Web設(shè)備：空間容量大

移動設(shè)備：較為有限，插卡

設(shè)計啟示：產(chǎn)品大小，緩存處理…

對于空間有限的手機來說，產(chǎn)品的應(yīng)用大小是用戶必然考慮的一個問題，特別是一些大型游戲。是不是游戲下載多了，突然系統(tǒng)彈出提示，告知手機磁盤空間不夠了。這時候你就會挑選那些特別占用空間的應(yīng)用刪除了。是不是應(yīng)用中瀏覽太多的圖片，感覺機器慢了，同時這時候圖片也占用了你更多的空間。每個應(yīng)用都有設(shè)置緩存空間，超過了就會覆蓋。清除緩存，不僅僅是空間的釋放，也會讓手機更流暢。所以需要的時候，設(shè)置清除緩存的入口，讓了解的用戶敢于各種預覽。

硬件按鈕

Web設(shè)備：產(chǎn)品主要通過瀏覽器呈現(xiàn)，基本布局一樣

移動設(shè)備：手機硬件與平臺的多樣性，應(yīng)用客戶端和瀏覽器產(chǎn)品并存

設(shè)計啟示：手機硬件按鈕，了解平臺的規(guī)范，了解瀏覽器特點…

每個平臺都有自己的硬件特性，所以了解平臺規(guī)范，是手機設(shè)計師必須要經(jīng)歷的。同樣了解簡單的按鍵也是特別需要的，比如iPhone只有一個按鍵，單擊返回主桌面，雙擊出后臺運行應(yīng)用。Windows phone有返回，搜索和返回主界面按鈕，andriod有菜單，返回主界面和返回按鈕，這些按鍵都直接影響應(yīng)用的信息架構(gòu)設(shè)計。

具有跨平臺的瀏覽器手機頁面的設(shè)計，也是需要了解各個瀏覽器的特性的?，F(xiàn)在主流的瀏覽器，包括andriod和ios自帶的，uc和QQ瀏覽器。Uc和QQ瀏覽器的左右滑動，是與前進和后退匹配的，還有全屏模式下各自的特點，這些特性都將影響到我們在產(chǎn)品設(shè)計時候的框架。

鼠標&手指

Web設(shè)備：鼠標，可以精準到1個像素的點擊

移動設(shè)備：手指，44ppi的模糊點擊

設(shè)計啟示：為拇指而設(shè)計，底部原則，邊緣原理，點擊區(qū)域，操作反饋…

隨著iphone重新設(shè)計了手機，iphone的經(jīng)典觸屏和多點觸摸基本就成了現(xiàn)在手機的標配。我們瞬間從鼠標按鍵和觸控筆時代進入了手指直接觸控時代。所以，對于移動設(shè)計來說，判斷應(yīng)用是否好壞的衡量標準，不再只是應(yīng)用本身的架構(gòu)，也在于設(shè)備與人本身操控的友好程度，這就需要設(shè)計師對人機工程有更多的了解。人機工程，是一門重要的工程技術(shù)學科，是研究人和機器、環(huán)境的相互作用及其合理結(jié)合，使設(shè)計的機器和環(huán)境系統(tǒng)適合人的生理、心理等特點，達到在生命中提高效率、安全、健康和舒適目的的一門科學。移動觸屏手機的誕生，讓我們與屏幕有了直接接觸，也帶來了更豐富的手勢操作。但與鼠標能精準到1個像素的點擊相比，手指的觸點有著相對的不穩(wěn)定性和區(qū)域的要求。不好的設(shè)計，將帶來嚴重的操作挫敗感。

為拇指而設(shè)計

上圖是我們?nèi)粘Ｊ褂檬謾C的一些情況。可以總結(jié)為如下六種持機方式。這些方式都將直接影響產(chǎn)品的信息架構(gòu)的友好程度。

當然實際情況中還存在更多的握法，但這六種是具典型代表性的。其中單手持機又占了更大部分。這就讓我們更加考慮為拇指而設(shè)計的概念。

使用拇指進行操控，是我們使用手機最常用的方式。寒冷的冬天，你吝嗇的只拿出一只手，握著手機打發(fā)時間，不是等人就是等車。擁擠的交通上，你不得不抓緊拉手，同時還開著手機看八卦和小說。一個電話，一條短消息，預覽內(nèi)容，拿起放下，我們都習慣了一只手來處理這些簡單任務(wù)。這些任務(wù)都是由我們的拇指來進行的，所以觸屏手機的界面交互方案是要著重考慮拇指這個點的。已有研究證明，當右手持機，拇指的有效的觸控區(qū)域如下：

何為有效，能靈活觸碰，能減少誤操作。不要讓用戶在觸碰的時候感覺到費力，不要讓用戶需要調(diào)整持機的方式，為了一個點擊。這些人機交互方式，都將體現(xiàn)在我們的界面設(shè)計中，請考慮將重要的功能元素放置在這個范圍內(nèi)。從各個移動平臺的操作系統(tǒng)來看，頁面重要的工具欄，還有標簽欄均處于這個位置，也是考慮到這個點。所以設(shè)計信息架構(gòu)的時候，必然要考慮到拇指的影響力。

底部原則

同時，設(shè)計的底部原則也有來自于拇指的有效觸控區(qū)域，還有一點，也來自于對內(nèi)容和反饋的少干擾。傳統(tǒng)的web界面布局，導航和重要功能點都在頁面上部，我們在操控鼠標的過程中，顯然不會對內(nèi)容和反饋有所遮擋，但如果在小屏幕的手機上，操作頁面上部分內(nèi)容的時候，頁面中會有大部分內(nèi)容會被遮擋住，包括點擊后的頁面反饋有時候也不能及時看到。

邊緣原理

還有點，需要利用好手持設(shè)備的邊緣。Windows平板就是大量的利用了邊緣原理。微軟的菜單欄和蘋果系統(tǒng)的菜單欄的點擊效率，就有很大的區(qū)別。號稱蘋果的菜單欄設(shè)計比微乳的效率高了20%，就是利用了邊緣的原理，讓用戶移動鼠標和點擊更直接方便。

chrome瀏覽器不僅僅是性能好那么簡單，他的tab也是利用了邊緣原理，讓用戶選擇切換的成本更小。

屏幕邊緣可以理解為無限大，充分擴張了用戶的實際操作范圍。Andriod和ios手機的消息中心，就是利用了邊緣原理，是不是大家在操作的時候，很少出現(xiàn)誤操作。因為我們一般都會從屏幕的外部開始滑動進來，與屏幕內(nèi)其他操作基本不會觸碰到。還有點，這里是拉動的設(shè)置，應(yīng)用大部分在這個區(qū)域是點擊，所以動作上是不一樣的，避免了誤操作的可能。

所以，善于利用邊緣原理，可以將我們的點擊效率和誤操作得到更好的改善。

點擊區(qū)域

誤點擊和視差，決定了需要更大的點擊區(qū)域。因為屏幕的玻璃厚度，有一定的視覺差，造成點擊的錯誤。所以大部分的點擊區(qū)域往往比我們看到的要大的多。設(shè)計的時候最好標注好大小的區(qū)域。

手指讓我們跟產(chǎn)品更接近，操作更便捷，但沒有了鼠標那種點擊陷下去和滴答聲，所以需要更直接的反饋，來告訴用戶已經(jīng)操作成功?？梢酝ㄟ^多態(tài)按鈕，聲音提示和震動等等。

鍵盤

Web設(shè)備：有鍵盤，物理彈性的鍵盤，可以讓我們隨心所欲的長篇大論

移動設(shè)備：小屏幕內(nèi)的虛擬鍵盤，只有半屏的輸入空間，小按鈕，晃動的屏幕

設(shè)計啟示：避免輸入，默認值，記錄歷史，轉(zhuǎn)化輸入方式，關(guān)聯(lián)詞…

避免輸入，使用語音

碎片化的時間，不穩(wěn)定的環(huán)境，讓我們很難心平氣和的在一個小屏幕下，仔細的按著那一排小按鈕，然后還要時常按錯按鍵。越多的輸入，只會讓用戶對產(chǎn)品的認可度更低。所以，避免輸入，轉(zhuǎn)換輸入方式，能提升產(chǎn)品操作的流暢度。Uc的語音搜索，微信的語音聊天。

轉(zhuǎn)化輸入方式

傳統(tǒng)的價格篩選，就是最簡單的文本框輸入

后來很多設(shè)計就改變了這樣的方式，通過區(qū)間滑塊，讓用戶通過簡單拖拉就能實現(xiàn)區(qū)間值。

記錄歷史

默認記憶成功輸入信息，讓系統(tǒng)完成信息記憶，減少輸入。比如登錄，

關(guān)聯(lián)詞

搜索的聯(lián)系詞，搜索歷史記錄，這些都是減少輸入的方式

傳感器

Web設(shè)備：傳感器。。。沉默。。。

移動設(shè)備：手機傳感器包括定位系統(tǒng)，重力傳感器，距離傳感器，光線傳感器，方位傳感器，陀螺儀，磁力計，氣壓、溫度傳感器。。。

設(shè)計啟示：利用好手機傳感器，能讓設(shè)計更有趣，更有創(chuàng)造力。

距離傳感器

隨著iPhone的誕生，催促著新一代智能手機在傳感器上的全面應(yīng)用，讓手機的體驗和互動達到了一個新的層面。我們在接聽手機電話時候，將手機靠近耳朵，這時候背景等就會自動熄滅。一方面防止觸屏與臉部接觸的誤操作，另外一方面也是節(jié)省電量。拿開手機的時候，背景燈又自動亮起，這些都是距離傳感器在起的作用。我們也想過利用距離傳感器跟產(chǎn)品做結(jié)合，傳達各種溫馨的效果。

手機屏幕小，商品的搜索結(jié)果頁一般都是列表模式。用戶在一些惡劣環(huán)境（如公交車上），或則因為視力不好，為了看清楚商品圖，往往非常近的靠近屏幕。如同我們看書時，因為字太小，而不得不更靠近書本。當用戶較長時間瀏覽商品結(jié)果頁，容易傷害到視力，引起眼疲勞。也增加了更多輻射的機會。這時候就可以利用距離傳感器來判定，設(shè)置用戶在太靠近屏幕的一定時間內(nèi)，提示用戶危害，將屏幕遠離自動切換到大圖模式。

重力傳感器

開會中，突然想起手機鈴聲，是不是很多人都手忙腳亂怎么關(guān)閉聲音？如果這時候能翻轉(zhuǎn)手機，變?yōu)殪o音，是不是特別自然和直接。這里就可以利用重力傳感器。搖一搖，尋找附件的人。搖一搖，換首歌曲。手機重力感應(yīng)器在產(chǎn)品中的運用已經(jīng)越來越廣泛，支持搖晃切換各種界面和功能。

定位系統(tǒng)

Nike+的跑步應(yīng)用，可以記錄跑步過程中的各種數(shù)據(jù)，最有意思的是，它根據(jù)定位系統(tǒng)，記錄你跑步的路線和距離。如果此應(yīng)用可以再發(fā)展一下，跑步的過程可以直接展示在另外一臺手機上，你是不是就想在家就可以監(jiān)督該鍛煉的那位了。

方位傳感器

地圖的應(yīng)用，在手機上基本都有配置。在一個陌生的地方，方位傳感器對一個方向不明了的人來說是非常重要的。

作為移動設(shè)計師，需要了解手機基本的傳感器有哪些，用途有哪些，很多游戲就應(yīng)用了各種傳感器來豐富可玩性。

內(nèi)置設(shè)備

Web設(shè)備：傳統(tǒng)pc外接各種設(shè)備

移動設(shè)備：攝像頭，閃光燈，麥克風，多點觸摸

設(shè)計啟示：組合應(yīng)用，各種想象。

一款戒煙的應(yīng)用，如下圖所示，無論屏幕是橫著還是豎著，煙都自然的朝上方騰起，當對著麥克風做吸氣，會模擬吸煙的效果，煙頭變亮，時間久了還有煙灰，抖一抖可以掉了，是不是很有趣。這里就是利用了，重力傳感器和麥克風的組合效果。

再看一款吹笛的應(yīng)用，如下圖。也是利用了重力傳感器來調(diào)節(jié)重低音，還有麥克風及屏幕的多點觸摸。

口袋體檢應(yīng)用，如下圖，就是利用了攝像頭和閃關(guān)燈的組合，發(fā)現(xiàn)指尖細微變化來分析心率，根據(jù)測試數(shù)值實時顯示心跳數(shù)值。

還有更多的應(yīng)用，都是利用了傳感器和各種內(nèi)置設(shè)備在組合，來創(chuàng)新產(chǎn)品。

來源：一淘UX