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

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

聚焦式網站 VS 響應式網站

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

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

設計上的本質不同

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

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

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

屏幕的定位功能與寬高比

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

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

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

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

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

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

放射式菜單

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

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

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

[[76955]]

擬真

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

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

撥號式交互界面

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

極簡主義運動

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

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

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

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