过期域名预定抢注

 找回密碼
 免费注册

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

  [複製鏈接]
發表於 2008-12-19 20:30:15 | 顯示全部樓層 |閱讀模式
在設計成品中,UI設計越來越顯得重要。而現實中有很多可以讓一個網頁設計既漂亮又功能化的技術,這裡,原作者介紹了10種他經常用在自己設計的產品中的技術。 如果你想擁有更好的UI,讓我們一起繼續。
0 _  H" b& E( C4 j, W# s1. 填充鏈接塊: e* |: ^4 @: v' y
鏈接(或錨點)都是默認的內聯元素,這就意味著,只有在它本身的跨度上才有可點擊性。如下圖所示(藍色部分為可點擊區域,一圖是TechCrunch的,二圖是Smash Magazine的):0 ]3 }1 [5 C) l& d# s3 R5 D
9 N9 r+ ]- P3 e" G- T
顯示,Smashing Magazine的鏈接可點擊性要比TechCrunch強。這可以增大點擊的正確率和點擊率。而如果你想這麼做,只要用以下的代碼即可:$ l$ a0 t- w; q, b7 n8 K+ D
4 Z6 Q# E8 N0 L" _% Z9 [
a {
0 }# O6 Y+ [2 u8 p; ~6 }( T" _display: block;
( @# Q7 X: s( ]6 g1 N& [$ lpadding: 6px; 3 E  M+ Q# M. t2 m6 A- s% q
}) s9 I+ J2 Y8 m

- V8 G* N" A$ l4 Y$ O當然,要提醒一下的是,請確保運用Padding是恰當的,IE有可能讓Padding沒能正常實現其真正的樣式。 有效避免Padding出現問題的方法是盡量讓它們與沒有padding或Margin的容器接觸,而常用的方法是,給padding的元素加上一個border。
- X6 ?! J' T4 y7 [! a2. 按鈕文章的排版
8 A2 _6 ]% f# S$ h; u. ?- S2 p) _# q3 B6 @" O
別小看這個問題,這可能是區分一個產品好與壞的一個細節。好的設計者會做到視覺平衡。讓我們來看看下面的例子:  ~+ a3 B8 f% n% ~; f

; W* f! L8 ~; e' S第一眼看起來還好,但看越覺得不對。你會覺得按鈕上的文字好像偏上了。因為大寫字母我小寫字母混大一起時,有一些是需要向上頂,或向下的(中文方塊字就不會了,很好!)我想表達的是:
8 D1 R1 R2 M3 n( P3 V2 h, W
/ K) k6 K& X4 V$ G% x7 K' H那麼,我們需要怎麼做呢?如果我們不想全部都是大字字母的話,可以按照下面的方法。讓他們都在同一個水平的空間內,而且是向下沉的,這樣做,可以現好地平衡視覺效果,讓人看起來文字正好在中間:
. s- u5 N8 d5 _" r, [/ k
$ D6 D) q: K* x$ d8 A  h+ G3. 使用對比來突出焦點
- O; E* W! Q, p, o. {# Y1 H# P% X
我想,我自己常用這個方法。因為這即安全又環保(囧),讓我們來看看下面這個吧:
8 w  M: O$ K, K$ X# O& d" Q; R* z+ U
看完上面的,讓我們來對比一下下面的文字,有什麼區別呢? 很明顯,我們把焦點放在大標題上
3 V% C# }" _7 W
4 k* Z0 Y: \# }6 d8 C/ p1 q不過,需要注意的是,你要突出的是標題,而不是一些比較將要的東西,所以,把焦點用對,向下面這個,並不適合:' C" Q" f: m, G% P4 U. o. `1 W
# N, d2 Z' o. C" `+ X# K( \" K
4. 使用顏色來突出焦點& [3 k: i: H/ c8 y
: z/ _6 y+ e7 p: J8 B
顏色通常可以引起用戶的注意,而你可以用突出的顏色來展示你想要展示的結果,就像下面一樣:
+ m  g" u8 W* W$ V' i8 J  u- g* y3 F9 Y3 T9 X) v
不過,就像上面我們在說標題的焦點一樣。你最好把顏色選對。做比較好的搭配,並確保要突出的內容出現在上方,而不是有被壓著的感覺,就像下面這兩個實例:
% t4 N6 J' n$ S) h$ N, g1 f
% T/ B  L) B' n7 R& sFunction 把HEADER區域中的 "We』re Hiring" 的鏈接突出來,像你現在所看到的,會沒有顧忌地把注意力投過去。從而使這個鏈接不會被遺忘,另外,讓我們來看看下一個:( Y- o/ J- n8 B( E+ t! ^

8 o9 l* r% `0 g3 `Causecast 剛把重要的東西都放在粉紅色的背景下,比如Feedback,LOGO,DONATE等。6 p; r1 {9 d4 Y, G, `$ F  t7 r" h1 F

: E8 \! v6 p/ b/ g8 b; G不過,切記,不要隨便讓一個頁面充滿顏色,這樣會失去焦點;不要運用太另類的搭配,這可能引起反感。適當利用,懂得我們的目的是要突出所需展示的內容,而不是在顏色本身。$ H/ p. i' U1 K
5. 用空行來表示關係% I5 w/ ~2 w# o& I

; G: Q4 \0 H" k# j# u這個說起來好像有點讓人摸不著究竟能體現出什麼關係來。其實,你只要看看平時我們看書的時候,通常每一個章節或者某個段落都可能用空白來隔開,表示他們屬於各種的內容,就是這個意思,下面讓我們來看一個例。這個排得很漂亮吧:3 M0 r( U" `, U$ ^, r

: ?0 }! r! q% w: O# Z. v) t+ G對,確實很漂亮。不過,在標題與段落之間,他們的間隔都一樣,容易讓人產生不知道這個標題是屬於那一段的感覺。而我們能做得更好,比如像下面一樣顯示,讓人一目瞭然。2 A! I% J8 t* w8 W
發表於 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/ - W( B% R1 L& O6 V+ E& e; l& |
http://www.avvip.info
  http://2.avvip.info 雞情liao天室 雞情liao天室 雞情liao天室 在線雞情liao天室 *** 雞情liao天室 雞情liao天室 http://www.avvip.info7 s. P7 J' l0 Q- C

0 p& W" q, y' n0 H- p鼠標進來看看。支持下樓主!
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

过期高净值品牌域名预定抢注

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

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

By DZ X3.5

小黑屋

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