过期域名预定抢注

 找回密碼
 免费注册

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

  [複製鏈接]
發表於 2008-12-19 20:30:15 | 顯示全部樓層 |閱讀模式
在設計成品中,UI設計越來越顯得重要。而現實中有很多可以讓一個網頁設計既漂亮又功能化的技術,這裡,原作者介紹了10種他經常用在自己設計的產品中的技術。 如果你想擁有更好的UI,讓我們一起繼續。
; F! k7 W. s% v. A4 }! k1. 填充鏈接塊1 n: A% j' }8 K+ h
鏈接(或錨點)都是默認的內聯元素,這就意味著,只有在它本身的跨度上才有可點擊性。如下圖所示(藍色部分為可點擊區域,一圖是TechCrunch的,二圖是Smash Magazine的):+ p) z7 [% \( @
; w% a0 x, U5 G+ y. l
顯示,Smashing Magazine的鏈接可點擊性要比TechCrunch強。這可以增大點擊的正確率和點擊率。而如果你想這麼做,只要用以下的代碼即可:% B; C' `7 C4 ^! j8 o6 h' G
% r) d2 d2 ~6 O
a { # ]# |- P( a. O* R+ `
display: block;   n1 a3 u1 j" M/ K  V! P% e' E1 o
padding: 6px;
5 c- S, D, a; f: k. [}- b- H1 K# o2 W5 f
9 F' V$ K& f) |% F  {
當然,要提醒一下的是,請確保運用Padding是恰當的,IE有可能讓Padding沒能正常實現其真正的樣式。 有效避免Padding出現問題的方法是盡量讓它們與沒有padding或Margin的容器接觸,而常用的方法是,給padding的元素加上一個border。
0 h& g5 u, C5 }  M+ @2 h6 c2. 按鈕文章的排版
7 H$ Q7 C6 ~) U% S6 D% u
7 p' ~( s: E. T. D* e5 ]別小看這個問題,這可能是區分一個產品好與壞的一個細節。好的設計者會做到視覺平衡。讓我們來看看下面的例子:  i) E5 o! h) s
/ g9 p5 ?( M* m2 y8 B
第一眼看起來還好,但看越覺得不對。你會覺得按鈕上的文字好像偏上了。因為大寫字母我小寫字母混大一起時,有一些是需要向上頂,或向下的(中文方塊字就不會了,很好!)我想表達的是:3 q  @$ ]8 A: |7 G& G* |
) ~& R- ^6 J8 b3 M8 e
那麼,我們需要怎麼做呢?如果我們不想全部都是大字字母的話,可以按照下面的方法。讓他們都在同一個水平的空間內,而且是向下沉的,這樣做,可以現好地平衡視覺效果,讓人看起來文字正好在中間:( Z8 _! V0 V. i  ]  i3 O
6 Q7 E" z0 X- i/ S+ L; B( i
3. 使用對比來突出焦點; Q( _3 n% D( m: n  _3 Z+ G- y. B2 v
' }; T& _' |+ j# F) w
我想,我自己常用這個方法。因為這即安全又環保(囧),讓我們來看看下面這個吧:
! L' m5 l( x( m& E  Q
, z1 s- F6 J' Y" l! l4 B0 _看完上面的,讓我們來對比一下下面的文字,有什麼區別呢? 很明顯,我們把焦點放在大標題上
* ^. R  E/ H0 D5 O  t
6 U/ d; X7 M5 o! b不過,需要注意的是,你要突出的是標題,而不是一些比較將要的東西,所以,把焦點用對,向下面這個,並不適合:+ \4 g! ?. F! G" ?6 w9 S

. Y4 l, f* W; F) \8 H3 `/ n4. 使用顏色來突出焦點
+ B$ h: S- d: I9 k; l9 m( x/ [9 T; V3 ]) Y6 ~" K( b
顏色通常可以引起用戶的注意,而你可以用突出的顏色來展示你想要展示的結果,就像下面一樣:' w8 R" E8 a1 J& a
. ?- C2 s2 G, z  y" p2 m3 b
不過,就像上面我們在說標題的焦點一樣。你最好把顏色選對。做比較好的搭配,並確保要突出的內容出現在上方,而不是有被壓著的感覺,就像下面這兩個實例:
, Q, v; T9 x$ ?5 @' G/ O1 S8 K% z2 J9 w- ?6 R/ O
Function 把HEADER區域中的 "We』re Hiring" 的鏈接突出來,像你現在所看到的,會沒有顧忌地把注意力投過去。從而使這個鏈接不會被遺忘,另外,讓我們來看看下一個:5 g* U' t# [. F
5 q! Q4 i  [" c5 s
Causecast 剛把重要的東西都放在粉紅色的背景下,比如Feedback,LOGO,DONATE等。
- X3 E# w5 X$ A' @8 b# m
8 r+ Q, W/ b4 ]* Z) h) ?" [/ ^% N不過,切記,不要隨便讓一個頁面充滿顏色,這樣會失去焦點;不要運用太另類的搭配,這可能引起反感。適當利用,懂得我們的目的是要突出所需展示的內容,而不是在顏色本身。0 I9 J; j6 Q, p' K4 C/ L9 I
5. 用空行來表示關係- K5 k/ s' T" G6 u2 k) o; K6 B

+ q3 X8 z& Z: D5 J" l0 _* K4 u這個說起來好像有點讓人摸不著究竟能體現出什麼關係來。其實,你只要看看平時我們看書的時候,通常每一個章節或者某個段落都可能用空白來隔開,表示他們屬於各種的內容,就是這個意思,下面讓我們來看一個例。這個排得很漂亮吧:
. j+ x( a3 A; C: V
3 R4 y# J& J. N8 t( L% R! j對,確實很漂亮。不過,在標題與段落之間,他們的間隔都一樣,容易讓人產生不知道這個標題是屬於那一段的感覺。而我們能做得更好,比如像下面一樣顯示,讓人一目瞭然。6 U+ B5 K5 f2 k- ~
發表於 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/ 1 o/ P7 z/ A; W# @4 n- q( c4 |' \
http://www.avvip.info
  http://2.avvip.info 雞情liao天室 雞情liao天室 雞情liao天室 在線雞情liao天室 *** 雞情liao天室 雞情liao天室 http://www.avvip.info) x% d8 Y, L+ a9 T( `' X% C3 d, P
: Q4 C& B4 V4 m. g; h2 f$ y" p
鼠標進來看看。支持下樓主!
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

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

GMT+8, 2025-7-19 06:56

By DZ X3.5

小黑屋

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