DIV CSS 佈局教程網

就在剛才，我給GMAIL安裝了Twitter插件。
安裝完插件後，Gmail提示我要連接Twitter的賬號才能使用：

我順著提示操作下去，就看到了這個頁面：

一路下來的英文界面，已經讓我相當的頭疼了。
但是這兩個按鈕即使不看文案,也很容易猜出其中的意思。
比起千篇一律的方形按鈕，這裡的“小箭頭”設計真是太貼心了。
在這裡它准確的指導了我進行下一步的操作。

在TB UED最新的文章《雞肋般的文案內容》 裡說到：能不說就不說，用優秀的交互來代替文案。
這裡可以小補充一下了：優秀的視覺設計也能達到這樣的效果。
當我們糾結於這裡的文案是”接受”‘，“允許”或者是“下一步”的時候，一個小小的箭頭反而最能說明問題。
圖形符號的作用是不能小視的，它直觀易記，非常便於信息的傳遞。

我認為在以下3個方面，圖形符號能幫助我們改善體驗：
一、明確方向性
從我們學習交互設計相關知識開始，就一直被強調“符合用戶的心理模型”。
我們絞盡腦汁掩蓋計算機那種難以令人理解的工作模式。
（1）就像是注冊：

我們要告訴用戶：
線上注冊就像你在銀行申請開通某項業務一樣簡單。
遵循一定的操作步驟，就能成功。
更妙的是，還有溫柔的銀行小妹告訴你：您還差幾步就辦理成功了。
鬼才關心計算機在後面交換了多少次數據。
（2） 除了操作流，恰當的圖形也能對視覺的方向進行引導：

如果這個下拉菜單不是往下，而是往左邊展開
應該是一件很讓人惱火的事情吧。

二、提高效率

閱讀圖形總比閱讀文字來的快。
（1）在提高效率方面，出現的最多的就是反饋圖標了。
為了加快用戶理解反饋的速度，大部分網站的反饋不僅提供了辨識用的圖標，還用顏色做以區分。


這樣的反饋，不需要看完所有文案，一眼就能得到反饋信息。
(2)圖形在對比中的優勢也是顯而易見：

就像上圖，你想了解不同賣家提供的服務，通過圖形對比幾乎一眼就能看出差別。
但是如果沒有圖形呢，相信你得多花不少時間：

(3) 當然，還有上面Twitter的那個例子，它極大的提高了我這個英盲的效率。
至少，我省去了查詞典的時間。

三、容易學習

現實環境中，有很多物理對象可以為我們提供隱喻。
雖然說在復雜的交互行為中，合適的隱喻體並不如我們想象中容易找到。
但是對於一些簡單的行為模式，使用一些通用圖形符號，會節省用戶的學習成本

例如上圖，左邊保存，右邊打印。
已經廣泛的應用在各大軟件界面上。
這種通用的甚至可以說是標准化的功能性圖形，對於用戶來說，學習成本是極低的。
當然，不排除不合適的圖形反而給用戶帶來困擾的情況。

當我們通過交互方式、文案，找不到合適的解決方式的時候。
不妨看看是不是能通過視覺的手法來解決問題。
就像Twitter那個貼心的箭頭按鈕一樣。