今天閱讀了《為觸控而設(shè)計(jì)-Design for touch》這篇博文，學(xué)到了不少的知識(shí)點(diǎn)。特此轉(zhuǎn)載過來與25學(xué)堂的同學(xué)們一起共勉！隨著微信5.0 即將發(fā)布和移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展。手機(jī)觸屏設(shè)計(jì)越來越重要了。

不久前在西雅圖舉行的2013 An Event Apart活動(dòng)里，Josh Clark發(fā)表了名為“為觸控而設(shè)計(jì)”的演講，分享了在當(dāng)前日益擴(kuò)大的設(shè)備種類環(huán)境下，如何思考為觸控而做的設(shè)計(jì)是否符合人體工程學(xué)等觀點(diǎn)。以下幾個(gè)要點(diǎn)跟大家來分享：

1. 回顧網(wǎng)頁設(shè)計(jì)的歷史，我們已經(jīng)意識(shí)到在某些方面，我們正在做的事情是錯(cuò)誤的：表格的布局、Web標(biāo)準(zhǔn)等等。觸控操作也正預(yù)示著類似的轉(zhuǎn)變。

2. 沒人真正的在往Web中輸入內(nèi)容。我們不得不與手指、鼠標(biāo)、鍵盤等“設(shè)備”抗?fàn)帯?

3. 觸控操作已經(jīng)不僅限于智能手機(jī)和平板電腦，每一個(gè)桌面主題的設(shè)計(jì)現(xiàn)在都必須支持觸屏移動(dòng)。

4. 網(wǎng)頁設(shè)計(jì)一直被認(rèn)為是一種視覺媒體，但如今，它不僅僅需要關(guān)心你的設(shè)計(jì)在屏幕上的每一個(gè)像素看起來如何，而是它看起來給人的感覺怎樣。我們不再只是視覺設(shè)計(jì)師，同樣也是工業(yè)設(shè)計(jì)師（譯者注：此處可以理解為交互設(shè)計(jì)師）。

5. 在觸摸屏上，有真正對(duì)于人體工程學(xué)的設(shè)計(jì)。觸控是一種物理層面的交互：事物在你手中是怎樣的感覺？所做的設(shè)計(jì)在你手里使用時(shí)是否行得通？

下面分別針對(duì)不同的移動(dòng)設(shè)備來講解下設(shè)計(jì)的要點(diǎn)：

手機(jī)網(wǎng)站設(shè)計(jì)指南-觸屏版

1. 你有三種握手機(jī)的方法：1、單手握住手機(jī)，用一個(gè)拇指操作；2、雙手握住手機(jī)，用一個(gè)拇指或其他手指操作；3、雙手握住手機(jī)，用兩個(gè)拇指操作。據(jù)調(diào)查，49%的人在戶外使用手機(jī)時(shí)，用單手，一個(gè)拇指操作；當(dāng)你算上使用兩個(gè)拇指操作的人，這個(gè)比例到達(dá)了75%。

2. 拇指觸控區(qū)域：即用單手，一個(gè)拇指操作時(shí)最舒服的操作區(qū)域。當(dāng)使用Web端時(shí)，標(biāo)準(zhǔn)的導(dǎo)航操作在頁面頂部，而現(xiàn)在，手機(jī)的底部成了放置重要操作更好的位置。

3. 內(nèi)容在上，操作在下，這是當(dāng)下設(shè)計(jì)軟件時(shí)的交互設(shè)計(jì)慣例。我們不希望我們的手指在操作的時(shí)候擋住內(nèi)容。

4. 不要太擔(dān)心“左還是右？”的問題，重要的決定都是圍繞著上和下來決定的。

5. 內(nèi)容在上，操作在下已經(jīng)是一個(gè)古老的交互模型了，你可以確保用戶在進(jìn)行任何操作時(shí)都不會(huì)遮擋內(nèi)容。

6. 但是在Android上，系統(tǒng)的控制按鈕在設(shè)備的底部，為了不和這些按鈕沖突，Android會(huì)建議你將APP內(nèi)的操作放在界面頂部，這意味著我們的手指會(huì)頻繁遮擋住內(nèi)容。

7. Web端所擁有的固定位置和高度限制，在手機(jī)瀏覽器的底部會(huì)更難定位。有的瀏覽器還在底部使用了自己的工具欄，再次壓縮了空間。因此，在頁面頂部添加錨鏈接，可以提供更快速的導(dǎo)航功能，取代頁腳導(dǎo)航模式。

8. iOS apps：控制鍵在屏幕底部。Android apps：控制鍵在屏幕頂部。Web（手機(jī)瀏覽器）：控制鍵在頁面底部。

平板設(shè)計(jì)指南

1. 同手機(jī)一樣，握平板的姿勢(shì)也是千奇百怪，但通常你握住的是它的兩側(cè)。

2. 在平板電腦上，同樣存在著關(guān)于拇指操作的人體工程學(xué)?？紤]使用屏幕頂部區(qū)域放置導(dǎo)航控制鍵，多多利用屏幕兩側(cè)和角落，將中心部分空出來。

3. 相對(duì)與頂部與底部來說，夠到屏幕的兩側(cè)是成本最小的。

4. 如果你想通過底部放置的Scrubber控件平移來預(yù)覽內(nèi)容，也是可以有例外的。

5. 為大尺寸平板而設(shè)計(jì)：多多利用屏幕兩側(cè)和角落，將上中部空出來，用底部來查看畫布中的效果。

觸控本指南

1. 運(yùn)行Windows8系統(tǒng)的可觸控式筆記本，也開始進(jìn)入市場了，這類設(shè)備要求能夠在傳統(tǒng)筆記本電腦上進(jìn)行觸控操作。

2. 在此類設(shè)