資訊專欄INFORMATION COLUMN
摘要：操作的層級在設計按鈕的時候必須明顯的體現出來首要操作必須明顯高對比度的背景顏色適用于這里。只有當銷毀操作是當前首要操作的時候采用高對比度的紅色背景樣式，比如彈出對話框的確認取消按鈕。
在微博看到別人轉發的這篇文章，里面的每一點都覺得非常實用，就決定翻譯一下，也算是給自己存個檔，加深一下印象。畢竟作為一個前端頁面仔，頁面UI的美化也是我們的工作，而且還會經常會被要求在頁面上加個這個或者加個那個，沒有設計稿直接整頁面也是常有的事，了解一些UI設計的基本法則還是很有必要滴~
原文鏈接>>>
不管喜不喜歡，每個網頁開發者總是會無法避免的要面對一些視覺設計上的決策。
可能你的公司沒有一個全職的設計師，你得自己隨機應變一些功能上的UI設計，又或者是你可能在做自己的項目，不想讓他看起來太像"另外一個Bootstrap網站"。
這時候你可能會干脆擺擺手說:“反正我永遠也做不好，我又不是設計師。”但其實有很多小技巧可以提升你的項目的設計感，并且不需要你有圖形設計的背景知識。
下面給大家介紹一些能夠立馬提升你的設計的小技巧：
使用字體的顏色和粗細來區分等級 而不是字體大小在做UI設計的時候有一個經常會犯的錯誤就是過度依賴字號大小來對文字進行級別的區分：
“這個文字重要？那就讓它大一點”
“這個文字次要？那就讓它小一點”
與其讓字號大小承擔這么多的工作，不如試試用字體粗細和顏色來做同樣的事：
“這個文字重要？那就讓它粗一點”
“這個文字次要？那就讓它顏色淺一點”
盡量保持在2-3種顏色：
用深色（不是黑色）來表示首要的內容，例如文章的標題。
用更淺的灰色來表示輔助文本，例如頁腳的版權信息等等。
同樣的，兩種字體粗細對于UI界面來說足夠了。
大多數文本使用正常字體粗細（400或500，具體取決于字體）
重點強調的文本使用更粗一些的字體（600或者700）
注意，不要使用400以下的字體粗細，因為它只有在較大的字號如標題這種才有效果，在小號字體上表現的非常不明顯，如果你想用更細的字來表示更次要的文本，可以使用更淺的顏色或者小一號的字體大小。
不要在彩色背景上使用灰色字體在白色背景下使用較淺一些的灰色來表示次要文本是一種不錯的選擇，但是在有顏色的背景下就不太好了。這是因為我們實際看到的灰色在白色背景下的效果是降低對比度。
要想視覺上讓文本的呈現次要等級效果，應該要讓文字顏色更接近背景色，而不是用灰色，以達到降低對比度的效果。
在彩色背景下，你可以采用一下兩種方式來降低對比度：
降低白色字的透明度 - 適當降低字的透明度，讓背景顏色稍微滲透一些，這樣即達到了弱化的效果又不會與背景相互沖突。
手動選擇一個接近背景顏色的字體顏色 - 當你的背景是圖形或者圖片的時候，這種方式比用透明度要好，因為透明度看起來會更死板像是褪色的感覺。選擇一個跟背景色的色調相同的顏色，調整飽和度和明度直到你覺得合適為止。
與其用大塊的陰影模糊去強調盒子，不如使用垂直方向上的偏移量。它看起來會更加的自然，因為它模擬的是燈光從上往下照射在物體上的投射，更接近我們在現實中看到的場景。
這個小技巧同樣也適用于input。
如果你想了解更多關于陰影設計的東西，可以看看 Material Design Guidelines。
當你想要在兩個區塊之間做分隔的時候，不要第一時間就想著用邊框。當然，邊框確實是很好的用來分割的方式，但是它不是唯一的方式啊，過多的使用邊框會讓你的設計看起來雜亂。
下次當你想用邊框的時候，不妨試試下面這幾個：
使用盒子陰影 - 盒子陰影實現的效果和邊框基本相同，但是它呈現的效果會更微妙一些，沒有邊框那么讓人分心。
用兩種不同的背景色 - 只要給元素稍微加一點背景顏色的不同，就能呈現分割的效果了，你可以嘗試去掉兩個不同背景色之間的邊框，其實根本不需要呢。
增加額外空間 - 還有什么比給元素之間增加空間更能體現分隔效果的呢？制造一點空間讓元素互相遠離，就能很好的達到分隔效果，也不需要引入其他的UI元素。
當你在某個地方需要用到大的圖標的時候（比如登錄頁的功能部分），你可能立馬就去用免費的字體圖標庫如 Font Awesome 之類的，然后調整字號大小，達到你需要的效果。
但是，它們畢竟是矢量圖像啊，當你放大了之后，質量不會下降嗎。
當然，矢量圖像即便是被放大也不會影響圖像質量，但是 實際大小為16–24px的圖標被放大3-4px之后，看上去會非常的不專業，缺乏細節，看上去十分笨重。
如果你只有小號的圖標，可以把它包裹在一個有背景色的大色塊里面，這樣既不影響圖標的顯示效果，又能占據更大的空間。
如果你有足夠的預算，也可以使用一些額外收費的圖標，比如 Heroicons 或者 Iconic。
如果你不是專業的設計師，你的界面也沒有也很平淡，沒有優美的插圖或者照片來裝飾，如何為頁面增添一點風味呢？
有一個效果很顯著的小技巧就是為簡單的頁面添加粗重的邊框，這樣可以減少頁面的乏味感。
舉個栗子，比如下面這個警告條：
再舉個栗子，高亮導航欄元素：
再再再舉個栗子，為整個頁面都加一個邊框：
這種方式不需要你有什么設計就能改善頁面UI，讓頁面看起來更有設計感。
如果你不知道如何選擇顏色，網上也有很多色系搭配方案可供選擇，或者試試 Dripple的顏色選擇，讓你從傳統顏色選擇器無窮無盡的可能中解脫出來。
當一個頁面上有很多需要用戶操作的按鈕時，很容易就陷入一種錯誤，就是完全根據語義來設計這些操作按鈕的顏色。
Bootsrap框架從某種程度上鼓勵了這種行為，當你引入一個button的時候，有一排不同語義的不同顏色的按鈕供你選擇。
“這是一個積極的操作？用綠色按鈕。”
“這個操作是刪除數據？用紅色按鈕。”
誠然，語義也是按鈕設計中必不可少的一個因素，但還有另外一個維度卻被忽略了，那就是層級。
在一個頁面的里面，操作按鈕的層級就像金字塔一樣分布，有一個最高級別的操作，和一些次要操作，以及一些不怎么使用的三次操作。操作的層級在設計按鈕的時候必須明顯的體現出來：
首要操作必須明顯 - 高對比度的背景顏色適用于這里。
次要操作應該表現清晰但不用太突出- 邊框樣式或者低對比度的背景色適用于這里。
三級次要操作應該是可被發現但不引人注目的 - 把這些操作當成 link鏈接的樣式來處理會比較好。
“那如果是銷毀操作呢？難道不應該用紅色嗎？”
不一定噢！如果不是首要操作，就不需要用紅色背景，用次要操作的樣式即可。
只有當銷毀操作是當前首要操作的時候采用高對比度的紅色背景樣式，比如彈出對話框的確認取消按鈕。
怎么樣，是不是看完了之后和我一樣覺得很有收獲捏？~(￣▽￣)~*
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113742.html
摘要：接下來先介紹七個馬上就能用起來的小技巧。老實講，文章所說的小技巧大部分都是新增的語法特性，，或者說已經發布好些年頭，這些特性大家可能已經非常熟識。，對象合并，不多說，大部分場景可以取代。 作者：@davidwalshblog原文：7 Useful JavaScript Tricks 和許多其他語言一樣，JavaScript 也需要靠很多小技巧去完成各種不同的事情。有的可能早已經廣為人...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
閱讀 1232·2021-11-11 16:54
閱讀 882·2021-10-19 11:44
閱讀 1347·2021-09-22 15:18
閱讀 2455·2019-08-29 16:26
閱讀 2957·2019-08-29 13:57
閱讀 3101·2019-08-26 13:32
閱讀 1089·2019-08-26 11:58
閱讀 2339·2019-08-26 10:37
