交互設(shè)計和視覺設(shè)計的重要性，業(yè)內(nèi)已經(jīng)達成了共識。
最近看了iphone版海豚瀏覽器的設(shè)計方案，正好借機再陳述一下相關(guān)的設(shè)計原則。
我想說的主要有三點：

1.交互設(shè)計受限于硬交互（硬件本身的基礎(chǔ)交互屬性），設(shè)計要在硬交互的基礎(chǔ)上進行擴展。
2.視覺設(shè)計最首要的任務(wù)是輔助交互設(shè)計，進行恰當并謹慎的視覺引導(dǎo)。
3.視覺愉悅性是很重要的一部分，但是視覺不能對交互體驗產(chǎn)生阻礙（如不恰當?shù)碾[喻、錯誤的視覺引導(dǎo)等）。

iphone版海豚瀏覽器在交互設(shè)計上，充分考慮了平臺和硬交互的特點，設(shè)計出了一套手勢交互體系，使用者可以通過劃簡單的手勢來控制頁面訪問。方案合理、體驗到位，同時節(jié)約了屏幕空間。
在視覺上，icon使用手繪風(fēng)格，用戶基本一眼就能夠判斷出這是用手在屏幕上繪制出來的線條，其視覺隱喻也很合理，圖一。

圖一

當然，設(shè)計具體交互時還要考慮，如果用戶操作遇到困難時應(yīng)該怎么處理？
一種可行的方法是，對觸摸屏的輸入事件進行監(jiān)測，如果連續(xù)多次監(jiān)測到無意義的手勢，自動彈出操作提示，以告知用戶哪些手勢是被支持的，圖二。

圖二

關(guān)于“交互設(shè)計受限于硬交互（硬件本身的基礎(chǔ)交互屬性），并在硬交互的基礎(chǔ)上擴展”，我用一個例子來陳述。
圖三是“下滑條”的三種模型：
模型一是PC上標準的類型。
模型二是觸屏設(shè)備（觸屏手機、平板電腦）的常見類型。
模型三是電視平臺上的展示類型。

圖三

在pc上，下滑條的作用有兩點：
1.提示用戶有隱藏的內(nèi)容。
2.支持用戶進行托拽——這要求滑塊不能太小，否則不利于用鼠標進行定位；其次下滑條不能太短，否則用戶輕輕一拖就會翻動幾屏，不利于操作，存在可用性問題。

在觸屏設(shè)備上，用戶直接對屏幕內(nèi)容進行操作，下滑條只是為了提示用戶有隱藏內(nèi)容，應(yīng)該盡量設(shè)計的細小一些，最大限度的節(jié)省屏幕空間。

在電視平臺上，焦點和操作是高度統(tǒng)一的。所以滑塊要做的清楚，以利于焦點間的切換。同時將下滑條做的細長一些，以節(jié)省屏幕空間。

同樣的組件，在不同平臺上有所不同。這是平臺本身的特點所決定的，這并不是隨意的，更不能生搬硬套。

前一段時間有人給我看了一個pc客戶設(shè)計方案，就將下滑塊設(shè)計成了“模型二”的樣子。不可否認，視覺上確實很美觀，但是卻帶來了很大的可用性問題，這就得不償失了。

一個好的產(chǎn)品，交互設(shè)計（易用性）要放到首位，視覺設(shè)計要恰當?shù)闹С纸换ァ?/p>

源地址：http://blog.sina.com.cn/s……0100v1lk.html