在設計成品中，UI設計越來越顯得重要。而現實中有很多可以讓一個網頁設計既漂亮又功能化的技術，這裡，原作者介紹了10種他經常用在自己設計的產品中的技術。 如果你想擁有更好的UI，讓我們一起繼續。, b6 I0 V9 q% a5 U R- h
1. 填充鏈接塊
, C( Z% f3 k( Y* X鏈接（或錨點）都是默認的內聯元素，這就意味著，只有在它本身的跨度上才有可點擊性。如下圖所示（藍色部分為可點擊區域，一圖是TechCrunch的，二圖是Smash Magazine的）：
( q* N* Z) m4 g
. E3 M S z, r* e顯示，Smashing Magazine的鏈接可點擊性要比TechCrunch強。這可以增大點擊的正確率和點擊率。而如果你想這麼做，只要用以下的代碼即可:
1 Q* g' U9 `1 _5 e8 e+ ?" u* V9 j1 _1 ^8 l/ s; E
a { $ a: T ~! _8 v# R, x S& A5 t
display: block;
) r+ I/ A6 P: F- Y5 p' v) |padding: 6px;
/ I+ R. h8 K, f& a7 t; z8 {: E. H}
! x {8 Y i$ Q" Z( _8 O6 _
# l* E" B& X8 e2 {0 t當然，要提醒一下的是，請確保運用Padding是恰當的，IE有可能讓Padding沒能正常實現其真正的樣式。 有效避免Padding出現問題的方法是盡量讓它們與沒有padding或Margin的容器接觸，而常用的方法是，給padding的元素加上一個border。
% y- |) i& ]/ k% P" P2. 按鈕文章的排版
2 w" e& u. Z0 i6 D. @$ ?, T0 d
, L& Z @$ c# F9 g7 z別小看這個問題，這可能是區分一個產品好與壞的一個細節。好的設計者會做到視覺平衡。讓我們來看看下面的例子：2 C& A1 l9 v0 Q* {, [
 " I0 `6 e$ t3 Q1 V
第一眼看起來還好，但看越覺得不對。你會覺得按鈕上的文字好像偏上了。因為大寫字母我小寫字母混大一起時，有一些是需要向上頂，或向下的（中文方塊字就不會了，很好！）我想表達的是：3 z, C- W" g E5 p* A
 7 ^% }; o$ w3 U+ L3 S* p: v
那麼，我們需要怎麼做呢？如果我們不想全部都是大字字母的話，可以按照下面的方法。讓他們都在同一個水平的空間內，而且是向下沉的，這樣做，可以現好地平衡視覺效果，讓人看起來文字正好在中間：
* W& z4 J8 Z$ N4 ~( Y" |* `0 C
* y2 ^# [1 n1 `: U) S3. 使用對比來突出焦點! ?( z, i( }' W9 J3 q
: d) I# A3 Y4 b' o9 U& ?我想，我自己常用這個方法。因為這即安全又環保（囧），讓我們來看看下面這個吧：
2 x- E$ E h H( g6 }8 A
2 ?' W& q3 n2 l5 s! g看完上面的，讓我們來對比一下下面的文字，有什麼區別呢? 很明顯，我們把焦點放在大標題上5 \# S. }) T# p7 j+ [" ~6 T
 " X/ v+ Q# u6 t
不過，需要注意的是，你要突出的是標題，而不是一些比較將要的東西，所以，把焦點用對，向下面這個，並不適合：
, o9 W) k1 j; Y. }) w
* X& h4 t; Z g; l4. 使用顏色來突出焦點
' G' h U9 v( l$ _: e9 S; L' M! p+ Y! Q4 e& u
顏色通常可以引起用戶的注意，而你可以用突出的顏色來展示你想要展示的結果，就像下面一樣：5 C* G6 i4 ]7 H
; h3 k( B3 U5 B; ^# u% j: r- Q不過，就像上面我們在說標題的焦點一樣。你最好把顏色選對。做比較好的搭配，並確保要突出的內容出現在上方，而不是有被壓著的感覺，就像下面這兩個實例：
: E/ w1 n. q, G' b( R; x : C: g7 `! r& Q& R
Function 把HEADER區域中的 "We』re Hiring" 的鏈接突出來，像你現在所看到的，會沒有顧忌地把注意力投過去。從而使這個鏈接不會被遺忘，另外，讓我們來看看下一個：4 a+ c f% `/ C' M3 ]6 p/ p
' l; W# X" Z' J, L5 ]0 O4 vCausecast 剛把重要的東西都放在粉紅色的背景下，比如Feedback，LOGO，DONATE等。8 j( u6 H- D. ]$ H
9 o" H. V. l" o4 U不過，切記，不要隨便讓一個頁面充滿顏色，這樣會失去焦點；不要運用太另類的搭配，這可能引起反感。適當利用，懂得我們的目的是要突出所需展示的內容，而不是在顏色本身。9 K. y$ t: y, Z. \! V
5. 用空行來表示關係( B1 t5 j4 ~; u4 k
5 r2 t& s, k& Z+ f0 N
這個說起來好像有點讓人摸不著究竟能體現出什麼關係來。其實，你只要看看平時我們看書的時候，通常每一個章節或者某個段落都可能用空白來隔開，表示他們屬於各種的內容，就是這個意思，下面讓我們來看一個例。這個排得很漂亮吧：! n; e; p3 S' H+ |% l. [1 @
$ y. \. O% }4 z- D; p1 w對，確實很漂亮。不過，在標題與段落之間，他們的間隔都一樣，容易讓人產生不知道這個標題是屬於那一段的感覺。而我們能做得更好，比如像下面一樣顯示，讓人一目瞭然。
( M" f+ q; f$ |$ s3 ` |
|
發表於 2008-12-19 20:30:15
提升卡
沉默卡
变色卡