觸控螢幕與使用者體驗：對設計本質的衝擊

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

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

聚焦式網站 VS 響應式網站

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

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

設計上的本質不同

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

在行動裝置上的按鈕必須更大，為了敲擊的精準性。再也沒有比“想要開啟一個連結，卻突然點錯了，需要退回去”這種狀況更令人厭煩的情境了。而且因為沒有游標，所以也不需要給連結注釋，總而言之要的就是“可點性”。

還有一點就是關於行動裝置輸入的精準性，因為觸控螢幕要麼是電阻式的要麼是電容式的，有著不同的敏感度。電阻式的靈敏性要差一些。所以，設計上必須要結合兩種不同的螢幕來考慮不同行動裝置的不同設計定位。

螢幕的定位功能與寬高比

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

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

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

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

那麼你的頁面該採用什麼樣的互動介面？

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

放射式菜單

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

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

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

擬真

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

通過熟悉感帶來一種感官上的直覺，這是擬真的關鍵所在，使用者把這種相似感和真實的物體結合起來，立即就能知道怎樣去互動。一個好的擬真設計能做到使用者瞅那麼一眼就能瞭解主題，知道頁面是用來幹什麼的，而不用什麼資訊氣球的高亮提醒。

撥號式互動介面

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

極簡主義運動

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

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

最後，我要用一個有些與眾不同的網站結束這篇文章。Thibaudhttp://www.thibaud.be/）是一個富有創造力的開發人員，他 曾經設計過像Pikibox這樣的網站。這裡提到的這個網站Thibadu非常的“觸摸友好”，而且也沒有限制案頭使用者的適用性。

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