过期域名预定抢注

 找回密碼
 免费注册

10個改善UI設計的技術(1)

  [複製鏈接]
發表於 2008-12-19 20:30:15 | 顯示全部樓層 |閱讀模式
在設計成品中,UI設計越來越顯得重要。而現實中有很多可以讓一個網頁設計既漂亮又功能化的技術,這裡,原作者介紹了10種他經常用在自己設計的產品中的技術。 如果你想擁有更好的UI,讓我們一起繼續。. w/ |8 V: t& M6 s
1. 填充鏈接塊
4 b: A. s$ A" w+ ~+ z/ D鏈接(或錨點)都是默認的內聯元素,這就意味著,只有在它本身的跨度上才有可點擊性。如下圖所示(藍色部分為可點擊區域,一圖是TechCrunch的,二圖是Smash Magazine的):
6 d- s  W* p2 q$ l* V
7 \  }1 b' A& h4 S0 L& u$ ]# F顯示,Smashing Magazine的鏈接可點擊性要比TechCrunch強。這可以增大點擊的正確率和點擊率。而如果你想這麼做,只要用以下的代碼即可:4 G# G  Z+ P+ e. [+ J

4 X; s( _8 s6 S3 E( s# v9 Da {
" }& D3 k! b% _: B- d3 w7 B" {2 rdisplay: block; # L- [2 D) I8 T! n* |$ D+ T; l
padding: 6px; $ D( C* _+ `, B( [1 `
}
+ k* e$ h9 y" r, i: t0 d
& [7 ], ], L* P0 i1 i) y' ^當然,要提醒一下的是,請確保運用Padding是恰當的,IE有可能讓Padding沒能正常實現其真正的樣式。 有效避免Padding出現問題的方法是盡量讓它們與沒有padding或Margin的容器接觸,而常用的方法是,給padding的元素加上一個border。
7 X' t; x4 c$ y% P2. 按鈕文章的排版% y, t8 f* f4 m- i  c: w

+ Q' z- q5 J4 \# g% f: a5 X別小看這個問題,這可能是區分一個產品好與壞的一個細節。好的設計者會做到視覺平衡。讓我們來看看下面的例子:
3 `1 k* M$ S* P3 G4 F
% k0 ^* j; G( c* [. F第一眼看起來還好,但看越覺得不對。你會覺得按鈕上的文字好像偏上了。因為大寫字母我小寫字母混大一起時,有一些是需要向上頂,或向下的(中文方塊字就不會了,很好!)我想表達的是:2 T& [4 r$ ~* C* F# H$ \4 X
" [% x- X0 {4 R* g% e) t
那麼,我們需要怎麼做呢?如果我們不想全部都是大字字母的話,可以按照下面的方法。讓他們都在同一個水平的空間內,而且是向下沉的,這樣做,可以現好地平衡視覺效果,讓人看起來文字正好在中間:
6 D  f0 U6 l. E: b7 L" R. ]3 X& B( ~* V: G( q; M, {1 e# o
3. 使用對比來突出焦點
( k" H! [* p7 J) ^2 N
/ N2 C+ C9 B* P# T5 _9 Z8 `. ?, a1 x# y我想,我自己常用這個方法。因為這即安全又環保(囧),讓我們來看看下面這個吧:
9 e0 \) p& T$ a, C! f9 I) A* ^' _- g) I1 k- X
看完上面的,讓我們來對比一下下面的文字,有什麼區別呢? 很明顯,我們把焦點放在大標題上3 }) r8 J( j% Y+ F/ O: j( }3 A

" D% n; |, \* F& D5 D; L/ K不過,需要注意的是,你要突出的是標題,而不是一些比較將要的東西,所以,把焦點用對,向下面這個,並不適合:# O& L8 Z& g5 e+ N! {; a2 S5 ^
' K; V$ R& M# s8 G
4. 使用顏色來突出焦點# ]/ O. D# |, H

3 S  Q/ p4 D! P; U) p顏色通常可以引起用戶的注意,而你可以用突出的顏色來展示你想要展示的結果,就像下面一樣:, D/ C8 V* I! x/ k5 n) U0 H# E

5 t. N6 M, q/ `$ Q8 x- F! b不過,就像上面我們在說標題的焦點一樣。你最好把顏色選對。做比較好的搭配,並確保要突出的內容出現在上方,而不是有被壓著的感覺,就像下面這兩個實例:
1 m, m) X# R! h1 r: e
! i( l* K( W$ z9 X! VFunction 把HEADER區域中的 "We』re Hiring" 的鏈接突出來,像你現在所看到的,會沒有顧忌地把注意力投過去。從而使這個鏈接不會被遺忘,另外,讓我們來看看下一個:
5 C, [% b% V' U. y2 X, C$ T3 d) S7 H( Q6 T' R8 U/ j
Causecast 剛把重要的東西都放在粉紅色的背景下,比如Feedback,LOGO,DONATE等。
) T  G: ]5 \2 k' {9 e/ c( l# B. Z9 F+ v: K( p' z# I8 b- y
不過,切記,不要隨便讓一個頁面充滿顏色,這樣會失去焦點;不要運用太另類的搭配,這可能引起反感。適當利用,懂得我們的目的是要突出所需展示的內容,而不是在顏色本身。6 X9 g+ v3 p% {7 W  V
5. 用空行來表示關係$ ~3 _+ w( m+ t$ F' w
4 p1 \3 i/ B. t$ Q
這個說起來好像有點讓人摸不著究竟能體現出什麼關係來。其實,你只要看看平時我們看書的時候,通常每一個章節或者某個段落都可能用空白來隔開,表示他們屬於各種的內容,就是這個意思,下面讓我們來看一個例。這個排得很漂亮吧:
' i' }1 g& i! o  H5 X- P2 o- Q: q/ Y( q: e; X1 ~& B
對,確實很漂亮。不過,在標題與段落之間,他們的間隔都一樣,容易讓人產生不知道這個標題是屬於那一段的感覺。而我們能做得更好,比如像下面一樣顯示,讓人一目瞭然。0 G' e6 [9 I% x0 r; y( O4 _
發表於 2008-12-19 23:05:41 | 顯示全部樓層
不錯,頂下
回復 给力 爆菊

使用道具 舉報

發表於 2011-8-23 11:48:05 | 顯示全部樓層
htc手機網上專賣 HTC手機排行榜 htc手機銷量排行榜 htc官方網上專賣店 htc智能手機專賣店 HTC手機排行榜 http://tao.viptaoke.info http://avxx.info http://www.avxx.info http://www.viptaoke.info http://2.avxx.info/
5 \0 d. L3 n4 n0 f) W( Ghttp://www.avvip.info
  http://2.avvip.info 雞情liao天室 雞情liao天室 雞情liao天室 在線雞情liao天室 *** 雞情liao天室 雞情liao天室 http://www.avvip.info
9 g+ R9 g1 a2 R" m/ A
3 D+ }: r: @7 u, i! n6 P; e5 ]
鼠標進來看看。支持下樓主!
回復 给力 爆菊

使用道具 舉報

發表於 2011-8-23 14:02:49 | 顯示全部樓層
有人翻出來,就收藏一下。
回復 给力 爆菊

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免费注册

本版積分規則

點基跨境 數位編輯創業論壇

GMT+8, 2025-7-11 09:20

By DZ X3.5

小黑屋

快速回復 返回頂部 返回列表