在設計成品中,UI設計越來越顯得重要。而現實中有很多可以讓一個網頁設計既漂亮又功能化的技術,這裡,原作者介紹了10種他經常用在自己設計的產品中的技術。 如果你想擁有更好的UI,讓我們一起繼續。; y$ \6 v3 z- ?
1. 填充鏈接塊
- w- c, w, `: t& K: i6 y9 w1 v鏈接(或錨點)都是默認的內聯元素,這就意味著,只有在它本身的跨度上才有可點擊性。如下圖所示(藍色部分為可點擊區域,一圖是TechCrunch的,二圖是Smash Magazine的):2 |2 C; S! Y' u' @/ T# {, b

: ^% b% L. Z4 T! @顯示,Smashing Magazine的鏈接可點擊性要比TechCrunch強。這可以增大點擊的正確率和點擊率。而如果你想這麼做,只要用以下的代碼即可:
2 u9 c$ m9 U& C m& ~ y0 s( }9 }7 q, P" x* l
a { * c9 `0 k2 y, A( w- }
display: block;
% A. l; E" X5 ]) s8 Zpadding: 6px;
+ W' F, v: ~! y1 H }5 r- Y}3 X0 Q! K+ C* h7 n/ h0 \
s, \' L# x! }$ R* m當然,要提醒一下的是,請確保運用Padding是恰當的,IE有可能讓Padding沒能正常實現其真正的樣式。 有效避免Padding出現問題的方法是盡量讓它們與沒有padding或Margin的容器接觸,而常用的方法是,給padding的元素加上一個border。
' w2 q# O7 A; m: D5 [2. 按鈕文章的排版
4 q9 }& m4 ]) x9 _( y7 `6 y: a a" C! ?5 [2 i$ J% A! N8 X' n. f
別小看這個問題,這可能是區分一個產品好與壞的一個細節。好的設計者會做到視覺平衡。讓我們來看看下面的例子:2 n b* |6 A/ F; s
7 M+ t5 ?3 s3 P7 G; A) |6 [
第一眼看起來還好,但看越覺得不對。你會覺得按鈕上的文字好像偏上了。因為大寫字母我小寫字母混大一起時,有一些是需要向上頂,或向下的(中文方塊字就不會了,很好!)我想表達的是:
- M" P- I1 l3 u/ P0 I* R
0 S6 p) ?4 Q0 s' h. U: F那麼,我們需要怎麼做呢?如果我們不想全部都是大字字母的話,可以按照下面的方法。讓他們都在同一個水平的空間內,而且是向下沉的,這樣做,可以現好地平衡視覺效果,讓人看起來文字正好在中間:
0 M9 E. y- V: L) X& V
8 |" _* d9 o4 Z. Q, ~3. 使用對比來突出焦點$ B0 ^, K A2 L1 ]* \) A
; g5 y6 k" p7 A& ?3 O/ y我想,我自己常用這個方法。因為這即安全又環保(囧),讓我們來看看下面這個吧:0 X9 g+ p: g3 I4 U4 c* F) |6 h
v6 A, m8 a7 s5 _/ T8 B) s
看完上面的,讓我們來對比一下下面的文字,有什麼區別呢? 很明顯,我們把焦點放在大標題上" C( C A: ^; B% i
5 A+ g% e3 s4 K% U
不過,需要注意的是,你要突出的是標題,而不是一些比較將要的東西,所以,把焦點用對,向下面這個,並不適合:
& g9 I& M4 ~% ^) A
: ?/ j$ h; x6 S1 U2 U) M4. 使用顏色來突出焦點
: F! n" o: K6 v8 p6 z3 x
) T' e; P4 p; u8 {6 j0 T; {1 A顏色通常可以引起用戶的注意,而你可以用突出的顏色來展示你想要展示的結果,就像下面一樣:
8 M8 s. d6 x' b
8 m, k/ \/ v. D不過,就像上面我們在說標題的焦點一樣。你最好把顏色選對。做比較好的搭配,並確保要突出的內容出現在上方,而不是有被壓著的感覺,就像下面這兩個實例:
! D6 o% E2 X3 V# z8 |- F: ^
: J0 q2 q B* j) p iFunction 把HEADER區域中的 "We』re Hiring" 的鏈接突出來,像你現在所看到的,會沒有顧忌地把注意力投過去。從而使這個鏈接不會被遺忘,另外,讓我們來看看下一個:
3 ^4 l- [2 z3 x & I6 S) [/ \" p% t s8 A% ]
Causecast 剛把重要的東西都放在粉紅色的背景下,比如Feedback,LOGO,DONATE等。8 c! p& G0 C; |; x
- Y$ g) K! G. a2 x6 P& q' ^. p7 Q
不過,切記,不要隨便讓一個頁面充滿顏色,這樣會失去焦點;不要運用太另類的搭配,這可能引起反感。適當利用,懂得我們的目的是要突出所需展示的內容,而不是在顏色本身。
$ r { r4 H* W, k. E( w! T3 o5. 用空行來表示關係
c# v- ^, H/ o9 t7 Z; `6 n+ G- X
這個說起來好像有點讓人摸不著究竟能體現出什麼關係來。其實,你只要看看平時我們看書的時候,通常每一個章節或者某個段落都可能用空白來隔開,表示他們屬於各種的內容,就是這個意思,下面讓我們來看一個例。這個排得很漂亮吧:- d0 E1 D8 t! x: ]
5 a# P* @6 a0 N Y @& P7 n
對,確實很漂亮。不過,在標題與段落之間,他們的間隔都一樣,容易讓人產生不知道這個標題是屬於那一段的感覺。而我們能做得更好,比如像下面一樣顯示,讓人一目瞭然。
* p2 W+ }2 o8 n* M- `5 [ M, w |
|