交互設(shè)計(jì)和視覺設(shè)計(jì)的重要性，業(yè)內(nèi)已經(jīng)達(dá)成了共識。

最近看了iphone版海豚瀏覽器的設(shè)計(jì)方案，正好借機(jī)再陳述一下相關(guān)的設(shè)計(jì)原則。

我想說的主要有三點(diǎn)：

1.交互設(shè)計(jì)受限于硬交互（硬件本身的基礎(chǔ)交互屬性），設(shè)計(jì)要在硬交互的基礎(chǔ)上進(jìn)行擴(kuò)展。

2.視覺設(shè)計(jì)最首要的任務(wù)是輔助交互設(shè)計(jì)，進(jìn)行恰當(dāng)并謹(jǐn)慎的視覺引導(dǎo)。

3.視覺愉悅性是很重要的一部分，但是視覺不能對交互體驗(yàn)產(chǎn)生阻礙（如不恰當(dāng)?shù)碾[喻、錯誤的視覺引導(dǎo)等）。

iphone版海豚瀏覽器在交互設(shè)計(jì)上，充分考慮了平臺和硬交互的特點(diǎn)，設(shè)計(jì)出了一套手勢交互體系，使用者可以通過劃簡單的手勢來控制頁面訪問。方案合理、體驗(yàn)到位，同時(shí)節(jié)約了屏幕空間。

在視覺上，icon使用手繪風(fēng)格，用戶基本一眼就能夠判斷出這是用手在屏幕上繪制出來的線條，其視覺隱喻也很合理，圖一。

圖一

當(dāng)然，設(shè)計(jì)具體交互時(shí)還要考慮，如果用戶操作遇到困難時(shí)應(yīng)該怎么處理？

一種可行的方法是，對觸摸屏的輸入事件進(jìn)行監(jiān)測，如果連續(xù)多次監(jiān)測到無意義的手勢，自動彈出操作提示，以告知用戶哪些手勢是被支持的，圖二。

圖二

關(guān)于“交互設(shè)計(jì)受限于硬交互（硬件本身的基礎(chǔ)交互屬性），并在硬交互的基礎(chǔ)上擴(kuò)展”，我用一個例子來陳述。

圖三是“下滑條”的三種模型：

模型一是PC上標(biāo)準(zhǔn)的類型。

模型二是觸屏設(shè)備（觸屏手機(jī)、平板電腦）的常見類型。

模型三是電視平臺上的展示類型。

圖三

在pc上，下滑條的作用有兩點(diǎn)：

1.提示用戶有隱藏的內(nèi)容。

2.支持用戶進(jìn)行托拽——這要求滑塊不能太小，否則不利于用鼠標(biāo)進(jìn)行定位；其次下滑條不能太短，否則用戶輕輕一拖就會翻動幾屏，不利于操作，存在可用性問題。

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

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

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

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

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

作者：Samael 任帥

文章來源：blog.sina.com.cn/mingqin1

標(biāo)簽： 交互設(shè)計(jì) 視覺設(shè)計(jì) iphone版海豚瀏覽器 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。