越來(lái)越多的人用手機(jī)或者平板瀏覽網(wǎng)頁(yè)。網(wǎng)站需要作出調(diào)整，來(lái)讓人們不用鼠標(biāo)和鍵盤(pán)也能閱讀他們的內(nèi)容。一般對(duì)此的反應(yīng)通常是“不就是再做一個(gè)獨(dú)立的 手機(jī)用戶界面么！”，這種解決方案在過(guò)去手機(jī)還比較小的時(shí)候還挺奏效，但是對(duì)于大屏手機(jī)和平板電腦來(lái)說(shuō)，這種方案是非常短視的。

本文將通過(guò)幾個(gè)常規(guī)或非常規(guī)的網(wǎng)站來(lái)展示怎樣去設(shè)計(jì)網(wǎng)站，以達(dá)到用戶體驗(yàn)更“觸摸友好”型。

聚焦式網(wǎng)站 VS 響應(yīng)式網(wǎng)站

很多網(wǎng)站建立的附屬的站點(diǎn)或者APP，專門針對(duì)觸摸屏用戶。以便讓他們把精力放在該類用戶上。但有一個(gè)問(wèn)題就是，既然網(wǎng)站是分開(kāi)的，那么所依賴的URL指向會(huì)造成用戶打開(kāi)錯(cuò)誤的鏈接，或者手機(jī)用戶打開(kāi)鏈接發(fā)現(xiàn)無(wú)法找到頁(yè)面。

***的問(wèn)題在于移動(dòng)版經(jīng)常缺少普通版的特質(zhì)和信息，有點(diǎn)縮減版的味道。網(wǎng)站的特點(diǎn)和交互界面被簡(jiǎn)化，按鈕做大，減少選項(xiàng)。這可以通過(guò)響應(yīng)式設(shè)計(jì)解 決。響應(yīng)式站點(diǎn)從設(shè)計(jì)上就考慮到不同平臺(tái)的顯示問(wèn)題，做到了不損失質(zhì)量的顯示。而且好處在于只需要設(shè)計(jì)一個(gè)站點(diǎn)就夠了，而不是再設(shè)計(jì)一個(gè)移動(dòng)版。

設(shè)計(jì)上的本質(zhì)不同

當(dāng)在設(shè)計(jì)網(wǎng)頁(yè)之前，要考慮到觸摸屏和臺(tái)式之間有本質(zhì)的不同。在觸摸屏上敲擊頁(yè)面是為了滾動(dòng)，然而在桌面上你需要下滑你的滾輪。Trackpad是采 用Apple交互觸摸技術(shù)的觸控板，Apple試圖通過(guò)它改變傳統(tǒng)的操作方式。然而無(wú)論P(yáng)C用戶還是MAC用戶更常規(guī)使用的還是滾輪或者滑塊，Apple 的產(chǎn)品處于不利的地位。

在移動(dòng)設(shè)備上的按鈕必須更大，為了敲擊的精準(zhǔn)性。再也沒(méi)有比“想要打開(kāi)一個(gè)鏈接，卻突然點(diǎn)錯(cuò)了，需要退回去”這種狀況更令人厭煩的場(chǎng)景了。而且因?yàn)闆](méi)有光標(biāo)，所以也不需要給鏈接注釋，總而言之要的就是“可點(diǎn)性”。

還有一點(diǎn)就是關(guān)于移動(dòng)設(shè)備輸入的精準(zhǔn)性，因?yàn)橛|摸屏要么是電阻式的要么是電容式的，有著不同的敏感度。電阻式的靈敏性要差一些。所以，設(shè)計(jì)上必須要結(jié)合兩種不同的屏幕來(lái)考慮不同移動(dòng)設(shè)備的不同設(shè)計(jì)定位。

屏幕的定位功能與寬高比

屏幕的分辨率多種多樣，科技市場(chǎng)的快速發(fā)展，導(dǎo)致了屏幕尺寸的多樣化、特殊化，制造商不同，屏幕尺寸也不同?？纯粗悄苁直淼钠聊话桑呀?jīng)不再是四邊形的屏幕了。通過(guò)轉(zhuǎn)動(dòng)，移動(dòng)屏幕不但可以顯示肖像畫(huà)（垂直），還能顯示風(fēng)景畫(huà)（水平），這使其更加復(fù)雜。

問(wèn)題的答案便是液體布局，可面對(duì)不同場(chǎng)景進(jìn)行自調(diào)整，能為水平和垂直顯示做出改變。有些網(wǎng)站采用這種適應(yīng)性布局大大的改變了網(wǎng)站外觀，優(yōu)化了控制性。而且利用了屏幕方向定位的這種潛力。

鼠標(biāo)的滾輪就是為了便于垂直移動(dòng)而設(shè)計(jì)的，自從Apple支持更具有創(chuàng)新形式的觸摸滑動(dòng)來(lái)下拉頁(yè)面，而不是采用轉(zhuǎn)軸滾動(dòng)后。很多用戶都改用觸控板或 者觸控屏。至于有更多創(chuàng)新想法的水平滑動(dòng)更不在話下。大部分App都采用了水平滑動(dòng)，目前為止最成功的的水平滑動(dòng)案例便是Kindle。所以為什么不在你 的網(wǎng)頁(yè)UI界面里實(shí)現(xiàn)呢？很多單頁(yè)網(wǎng)站僅有一個(gè)水平軸，但是通常也都會(huì)有按鈕來(lái)引導(dǎo)用戶滑動(dòng)，因?yàn)楹芏嘤脩艨赡懿焕斫獠僮鞣绞健?/p>

在設(shè)計(jì)形式上，水平滑動(dòng)和垂直滑動(dòng)可能很相似，然而合理的運(yùn)用它們可以實(shí)現(xiàn)多軸滾動(dòng)，這可能不會(huì)再瀏覽器中實(shí)現(xiàn)。很多用戶更喜歡單軸，因?yàn)槎噍S容易 找不到方向，而單軸只需要?jiǎng)澔貋?lái)，就能回到主導(dǎo)航條了。對(duì)于雙軸網(wǎng)站來(lái)說(shuō)這可能不是那么容易，因?yàn)閷?dǎo)航條需要靜止，所以使用HUD風(fēng)格的導(dǎo)航條吧。

那么你的頁(yè)面該采用什么樣的交互界面？

顯而易見(jiàn)的是不是每個(gè)用戶界面都適用于于各種類型的網(wǎng)站，所以問(wèn)你自己一個(gè)最基本的問(wèn)題：誰(shuí)是你的目標(biāo)用戶？你想要“推銷”的是什么？你想營(yíng)造怎樣 的印象？年輕的人更喜歡使用觸摸屏，而歲數(shù)大點(diǎn)的可能更喜歡使用臺(tái)式，但大齡用戶可能也需要更大的按鈕和清晰的用戶界面。再有革新性的用戶界面，如果沒(méi)人 能夠理解使用方法，那么也是毫無(wú)意義的，所以要牢記，創(chuàng)造用戶界面的目的是用戶一看便知如何使用。

放射式菜單

放射式菜單，或者叫餡餅菜單，是一種環(huán)形上下文菜單，采用了多種方向的上下文拓展，而不是那種通過(guò)拉長(zhǎng)拉寬來(lái)提供更深一步選項(xiàng)的菜單。

這是一種優(yōu)秀的直覺(jué)式設(shè)計(jì)，防止用戶在種類繁多的子菜單中“迷路”。另外的一個(gè)好處是相比操作常規(guī)的下拉式菜單，觸摸屏用戶可以更好的控制，因?yàn)榉?向性的操作比敲擊操作更加精確。若采用放射式菜單，網(wǎng)站會(huì)極大地提高觸屏用戶的用戶體驗(yàn)，而延伸出來(lái)的按鈕開(kāi)關(guān)讓人聯(lián)想到游戲中的控制臺(tái)。放射式菜單能夠 簡(jiǎn)化冗長(zhǎng)的菜單，變?yōu)楹?jiǎn)單的形式，增加了網(wǎng)站的效率和易用性。

放射式菜單是一種優(yōu)秀的上下文信息展示體驗(yàn)，舉個(gè)例子來(lái)講，在采用這種菜單的網(wǎng)站上你看到了一幅美食圖片，你輕點(diǎn)一下這幅圖片，然后就出現(xiàn)了轉(zhuǎn)發(fā)、 食譜鏈接、食材清單、保存圖片的選項(xiàng)。然而采用這種菜單一定要謹(jǐn)慎，保持菜單的適用性和簡(jiǎn)潔，否則用戶會(huì)感到他被泛濫的“標(biāo)志和詞語(yǔ)結(jié)合的菜單”淹沒(méi)了。 靜止式的放射式菜單比動(dòng)態(tài)的好，因?yàn)殪o止的更好方便進(jìn)行選擇，至于動(dòng)態(tài)的反面教材就是Phong(http://phong.com/),非?；靵y的操作 體驗(yàn)。

[[76955]]

擬真

擬真設(shè)計(jì)臨摹物體的外觀和功能來(lái)創(chuàng)造出一種直覺(jué)性的交互界面，最近它已經(jīng)不再流行，尤其是自從Scott Forstall從Apple辭職，做扁平化設(shè)計(jì)的Jony Ive的接管了iOS，還很有可能接管以及未來(lái)的OS X。擬真把Apple推向了直覺(jué)式操作設(shè)計(jì)上***的高度，比如Mac上的Contacts看上去像地址簿，或者iOS上的Newsstand和 iBooks看起來(lái)像書(shū)架。這種設(shè)計(jì)對(duì)于采用觸摸式交互的用戶來(lái)說(shuō)更容易理解.

通過(guò)熟悉感帶來(lái)一種感官上的直覺(jué)，這是擬真的關(guān)鍵所在，用戶把這種相似感和真實(shí)的物體結(jié)合起來(lái)，立即就能知道怎樣去交互。一個(gè)好的擬真設(shè)計(jì)能做到用戶瞅那么一眼就能了解主題，知道頁(yè)面是用來(lái)干什么的，而不用什么信息提示框的高亮提醒。

撥號(hào)式交互界面

這是結(jié)合了上面很多元素的界面，整個(gè)用戶界面就是簡(jiǎn)單的撥號(hào)，和放射式菜單看起來(lái)很相似，但是它有一個(gè)中心，以此展開(kāi)了選項(xiàng)，撥號(hào)式的轉(zhuǎn)動(dòng)來(lái)進(jìn)行單 選。在音樂(lè)類型的網(wǎng)站/App中這非常有作用，通過(guò)撥號(hào)選歌、挑歌、調(diào)節(jié)音量都很方便。在SHSK’H(http://www.shskh.com /www/)這個(gè)列子中就采用了撥號(hào)式UI，方便用戶選擇想聽(tīng)的音軌。

極簡(jiǎn)主義運(yùn)動(dòng)

極簡(jiǎn)主義就是界面盡可能的進(jìn)行刪減，直至剩下一些必要元素。對(duì)于移動(dòng)用戶來(lái)說(shuō)非常非常的方便，因?yàn)樗鼫p少了載入時(shí)間和流量，在清爽的界面下可以快速的找到所需信息?，F(xiàn)今的極簡(jiǎn)主義不僅僅是對(duì)網(wǎng)站進(jìn)行“減法”，還形成了一種新的形式叫“扁平化設(shè)計(jì)”

扁平化的關(guān)鍵在于不再以“注重用戶的直覺(jué)”為核心理念，因?yàn)槿藗円呀?jīng)熟知了交互界面，養(yǎng)成了使用的習(xí)慣，他們已經(jīng)熟悉了操作，所以現(xiàn)階段的設(shè)計(jì)要超 越那種“引導(dǎo)用戶如何去做”的概念。交互界面最終變成了一種工具，而不再是用戶的導(dǎo)師了。扁平化設(shè)計(jì)的特質(zhì)是使用明亮的色塊，在iOS7中，“斜角”讓位 于多彩的扁平化設(shè)計(jì)。

***，我要用一個(gè)有些與眾不同的網(wǎng)站結(jié)束這篇文章。Thibaud（http://www.thibaud.be/）是一個(gè)富有創(chuàng)造力的開(kāi)發(fā)者，他 曾經(jīng)設(shè)計(jì)過(guò)像Pikibox這樣的網(wǎng)站。這里提到的這個(gè)網(wǎng)站Thibadu非常的“觸摸友好”，而且也沒(méi)有限制桌面用戶的適用性。

簡(jiǎn)單的設(shè)計(jì)效果卻非常漂亮，專業(yè)的完整的展現(xiàn)了個(gè)人資料，而且富有操作趣味，***眼看到這個(gè)網(wǎng)站就知道如何操作。當(dāng)然，還把很大一部分設(shè)計(jì)的權(quán)力交給了用戶，用戶可以改變導(dǎo)航條的位置，調(diào)整它的空間位置。而電腦版提供了四種頁(yè)面形式，我建議你去嘗試一下。