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

本文將通過幾個常規(guī)或非常規(guī)的網(wǎng)站來展示怎樣去設計網(wǎng)站，以達到用戶體驗更“觸摸友好”型。

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

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

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

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

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

在移動設備上的按鈕必須更大，為了敲擊的精準性。再也沒有比“想要打開一個鏈接，卻突然點錯了，需要退回去”這種狀況更令人厭煩的場景了。而且因為沒有光標，所以也不需要給鏈接注釋，總而言之要的就是“可點性”。

還有一點就是關(guān)于移動設備輸入的精準性，因為觸摸屏要么是電阻式的要么是電容式的，有著不同的敏感度。電阻式的靈敏性要差一些。所以，設計上必須要結(jié)合兩種不同的屏幕來考慮不同移動設備的不同設計定位。

屏幕的定位功能與寬高比

屏幕的分辨率多種多樣，科技市場的快速發(fā)展，導致了屏幕尺寸的多樣化、特殊化，制造商不同，屏幕尺寸也不同。看看智能手表的屏幕吧，已經(jīng)不再是四邊形的屏幕了。通過轉(zhuǎn)動，移動屏幕不但可以顯示肖像畫（垂直），還能顯示風景畫（水平），這使其更加復雜。

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

鼠標的滾輪就是為了便于垂直移動而設計的，自從Apple支持更具有創(chuàng)新形式的觸摸滑動來下拉頁面，而不是采用轉(zhuǎn)軸滾動后。很多用戶都改用觸控板或 者觸控屏。至于有更多創(chuàng)新想法的水平滑動更不在話下。大部分App都采用了水平滑動，目前為止最成功的的水平滑動案例便是Kindle。所以為什么不在你 的網(wǎng)頁UI界面里實現(xiàn)呢？很多單頁網(wǎng)站僅有一個水平軸，但是通常也都會有按鈕來引導用戶滑動，因為很多用戶可能不理解操作方式。

在設計形式上，水平滑動和垂直滑動可能很相似，然而合理的運用它們可以實現(xiàn)多軸滾動，這可能不會再瀏覽器中實現(xiàn)。很多用戶更喜歡單軸，因為多軸容易 找不到方向，而單軸只需要劃回來，就能回到主導航條了。對于雙軸網(wǎng)站來說這可能不是那么容易，因為導航條需要靜止，所以使用HUD風格的導航條吧。

那么你的頁面該采用什么樣的交互界面？

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

放射式菜單

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

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

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

[[76955]]

擬真

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

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

撥號式交互界面

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

極簡主義運動

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

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

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

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