北京時(shí)間07月05日消息，中國(guó)觸摸屏網(wǎng)訊，為了Windows Phone的用戶靠直覺便能使用觸摸屏操作系統(tǒng)，Win8在用戶界面上做出了大量的徹底的調(diào)整。Apple隱隱約約的也放出了要改變OSX的風(fēng)聲，流線化設(shè)計(jì)也越來越多的應(yīng)用于他們的移動(dòng)和桌面操作系統(tǒng)上，但是依然看不到帶觸摸屏的MAC?，F(xiàn)在的用戶花費(fèi)越來越多的時(shí)間使用手機(jī)而不是電腦，這說明觸摸屏革命正在向我們襲來。

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

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

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

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

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

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

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

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

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

　　屏幕的定位功能與寬高比

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

　　問題的答案便是液體布局，可面對(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)來下拉頁面，而不是采用轉(zhuǎn)軸滾動(dòng)后。很多用戶都改用觸控板或者觸控屏。至于有更多創(chuàng)新想法的水平滑動(dòng)更不在話下。大部分App都采用了水平滑動(dòng)，目前為止最成功的的水平滑動(dòng)案例便是Kindle。所以為什么不在你的網(wǎng)頁UI界面里實(shí)現(xiàn)呢？很多單頁網(wǎng)站僅有一個(gè)水平軸，但是通常也都會(huì)有按鈕來引導(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)澔貋恚湍芑氐街鲗?dǎo)航條了。對(duì)于雙軸網(wǎng)站來說這可能不是那么容易，因?yàn)閷?dǎo)航條需要靜止，所以使用HUD風(fēng)格的導(dǎo)航條吧。

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

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

　　放射式菜單

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

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

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

　　擬真

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

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

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

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

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

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

　　扁平化的關(guān)鍵在于不再以“注重用戶的直覺”為核心理念，因?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)造力的開發(fā)者，他曾經(jīng)設(shè)計(jì)過像Pikibox這樣的網(wǎng)站。這里提到的這個(gè)網(wǎng)站Thibadu非常的“觸摸友好”，而且也沒有限制桌面用戶的適用性。

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