頁面設計(web設計)5個小技巧

來源:互聯網
上載者:User

從某種意義上來說,頁面設計(web設計)也就是使用者介面設計。有許多技巧可以協助我們製作出漂亮、實用的介面,這裡收集的5個小技巧就會對你有所協助的。這些技巧並不依賴於特定的主題或模板,所以會適用於多數情況下的設計。不羅嗦了,我們開始吧!

1.改善連結體驗
       網頁中的文字連結通常標有底線,表示文字是可以點擊的,但可點擊地區不會超過字元的寬、高範圍。設計類似這種帶有超連結的可點擊地區的時候,都可以通過一些小技巧來提高可用性,比如:增加間隔,有些情況下甚至可以把連結轉換為塊元素。如下圖,用高亮來區別可點擊地區。


       顯然,可點擊的地區越大,使用者點擊就容易。在沒有指定寬度的時候,將連結轉換為塊元素,可以使文字連結的可點擊地區擴大到為整個容器的寬度,這樣的設計尤其適用於側邊欄的連結。這個技巧可以通過如下CSS實現。

a {
 display: block;
 padding: 6px;
 }  

注意:由於轉換為塊元素只對連結的寬度起作用,所以需要設定間隔(padding)來保證塊在縱向的間距。

      2.按鈕也需要排版!
      設計的每一個細節失誤都有可能把完美的產品變成平庸,比如按鈕、Tab這樣簡單的介面元素,由於使用者每天都會點擊無數次,也需要適當的進行排版。請看下面一些例子:

    乍看起來上圖沒有什麼問題,仔細觀察可以發現,按鈕和select的文字都偏上,原因就是將小寫字母作為了排版的基準,小寫字母置中時,整個文字的位置就會顯得偏上。如下圖:

      就像上圖中,如果按鈕上的文字包含大寫字母或一些較高的小寫字母,如”t,d,f,h,k,l”的時候,文字就會顯得偏上。所以,通常應該把大寫字母作為定位的基準,或者在小寫字母較多時,稍微將文字的位置向上移動。

      上面的文字排版使按鈕看起來更舒服,注重像這樣的小細節對介面設計大有協助。
      大頭:雖然中文沒有大小寫字母的問題,但也有很多頁面設計時不注重按鈕的文字排版,導致錯位。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。