在設計成品中,UI設計越來越顯得重要。而現實中有很多可以讓一個網頁設計既漂亮又功能化的技術,這裡,原作者介紹了10種他經常用在自己設計的產品中的技術。 如果你想擁有更好的UI,讓我們一起繼續。7 R: n' }/ z# F# t6 d5 e
1. 填充鏈接塊$ I! {) W% p3 v# y
鏈接(或錨點)都是默認的內聯元素,這就意味著,只有在它本身的跨度上才有可點擊性。如下圖所示(藍色部分為可點擊區域,一圖是TechCrunch的,二圖是Smash Magazine的):
0 {/ [3 T& r( d- V4 c3 X1 x & [- a5 H' a/ j- v, {1 H5 [
顯示,Smashing Magazine的鏈接可點擊性要比TechCrunch強。這可以增大點擊的正確率和點擊率。而如果你想這麼做,只要用以下的代碼即可:1 U+ y" J" Y. B5 ?1 |6 ~( x& c, r
4 Z" r% x1 E4 ? y* ba {
6 ~3 @" V3 ~1 s4 g* Tdisplay: block; 5 Q" G% b- q# g+ W
padding: 6px; 8 X4 L. e, Z- L. o& z
}
$ \- V) j0 _" k( Q7 s' |
. z; o2 w/ @! I當然,要提醒一下的是,請確保運用Padding是恰當的,IE有可能讓Padding沒能正常實現其真正的樣式。 有效避免Padding出現問題的方法是盡量讓它們與沒有padding或Margin的容器接觸,而常用的方法是,給padding的元素加上一個border。8 C% Q9 A- R2 R$ F$ W
2. 按鈕文章的排版) {! L' j9 f& E9 g5 G. t
: f& m7 l. R; p* H/ B* ?5 q: p- @
別小看這個問題,這可能是區分一個產品好與壞的一個細節。好的設計者會做到視覺平衡。讓我們來看看下面的例子:
9 k3 }* J- d3 o; Z5 |
7 a( B+ q6 K7 ~3 }第一眼看起來還好,但看越覺得不對。你會覺得按鈕上的文字好像偏上了。因為大寫字母我小寫字母混大一起時,有一些是需要向上頂,或向下的(中文方塊字就不會了,很好!)我想表達的是: C! o5 v2 ^: g2 o& u
8 l% b4 u4 N8 I
那麼,我們需要怎麼做呢?如果我們不想全部都是大字字母的話,可以按照下面的方法。讓他們都在同一個水平的空間內,而且是向下沉的,這樣做,可以現好地平衡視覺效果,讓人看起來文字正好在中間:+ |- S5 X( ~- H

) D h# A! I1 D. j' b) |3. 使用對比來突出焦點
5 U. n8 ?2 _' _, {7 \
! J2 H8 _0 Z! I0 D. A我想,我自己常用這個方法。因為這即安全又環保(囧),讓我們來看看下面這個吧:
5 g& J6 {; z; ?8 {
+ ?8 `* F. n$ l看完上面的,讓我們來對比一下下面的文字,有什麼區別呢? 很明顯,我們把焦點放在大標題上9 {# j* f& h8 J8 o2 j

: g; _9 i. H/ `8 S- F不過,需要注意的是,你要突出的是標題,而不是一些比較將要的東西,所以,把焦點用對,向下面這個,並不適合:- E& A& _! }6 L$ R

; ^1 k, S# i% m5 w7 A% ?6 j. w4. 使用顏色來突出焦點
/ U' J$ ^1 s, H: X+ \. `5 j' l# S- [
( S- i6 @+ b6 w4 |5 f" I" {% |顏色通常可以引起用戶的注意,而你可以用突出的顏色來展示你想要展示的結果,就像下面一樣:: }/ Z' x* ~, s2 g( m1 S

4 `% [* {/ b! X8 Z不過,就像上面我們在說標題的焦點一樣。你最好把顏色選對。做比較好的搭配,並確保要突出的內容出現在上方,而不是有被壓著的感覺,就像下面這兩個實例:
8 y' p& J5 D6 v $ c/ s; R- \" F
Function 把HEADER區域中的 "We』re Hiring" 的鏈接突出來,像你現在所看到的,會沒有顧忌地把注意力投過去。從而使這個鏈接不會被遺忘,另外,讓我們來看看下一個:) h) |; T# p" F0 W( j
6 c$ T: F9 l1 H
Causecast 剛把重要的東西都放在粉紅色的背景下,比如Feedback,LOGO,DONATE等。
$ N2 F. n0 M. z( X1 W$ D- j9 |9 f( E( s2 q( w; g2 v& X, K
不過,切記,不要隨便讓一個頁面充滿顏色,這樣會失去焦點;不要運用太另類的搭配,這可能引起反感。適當利用,懂得我們的目的是要突出所需展示的內容,而不是在顏色本身。
3 o& d1 v- t+ F0 f0 A4 ?5. 用空行來表示關係
, _/ c( Z* y0 I' @) w% n. j% J/ v# }2 p) X1 e) _/ _% z* N7 s
這個說起來好像有點讓人摸不著究竟能體現出什麼關係來。其實,你只要看看平時我們看書的時候,通常每一個章節或者某個段落都可能用空白來隔開,表示他們屬於各種的內容,就是這個意思,下面讓我們來看一個例。這個排得很漂亮吧:/ e+ B/ {% ]$ b7 ?) m8 N
% K8 d/ w0 i9 \5 r& ], u
對,確實很漂亮。不過,在標題與段落之間,他們的間隔都一樣,容易讓人產生不知道這個標題是屬於那一段的感覺。而我們能做得更好,比如像下面一樣顯示,讓人一目瞭然。
$ r1 Q0 R" v3 @% [ } |
|