引言：在設計的工作中，很多時候會聽到參加評審的設計師或者是某些領導說，這設計稿細節不夠啊。設計師有時就會很委屈:「我都已經細化到畫素級別了啊，為什麼還說細節不夠呢？什麼是細節呢？」這篇文章，結合乙個具體的示例來描述下我對設計細節的理解。
先說下設計細節具體是什麼。其實這是乙個很廣義的概念，乙個設計作品如果成功，細節方面一定是到位的，但是細節不僅僅是指細小的東西，比如說畫素級別的對齊，到位等等，還包括:這裡如果不用這種形式，稍微加點紋理或者質感會不會更好，與整體是否協調，光影關係是否與整個圖示或者整個介面一致等等。
在摳設計的細節的時候，一定要戒驕戒躁，即使是很小的乙個點上，也需要多思考，如何讓這個點更符合整個設計作品的氣質，確定之後再去動手去實現。而不要說因為需要做的事情很小，而且沒什麼技術難度，就直接去幾下畫完，然後再一次次的評審中去修改，這樣花的時間很有可能更多，而且達不到想要的效果。那接下來就以乙個具體的設計案例去具體講述下什麼是設計的細節，以及在設計的過程中如何去把設計的細節做好。
有乙個需求是這樣的，介面上有乙個彈出框，如圖1:
圖1 設計原稿
為了適應產品的新特性，我們需要在這個彈出框上加乙個小的抓手，可以拖拽這個彈出框，需要設計側給這個彈出框加一點修飾，讓它看起來是可以拖拽的。
需求其實很簡單，而且有很多現成的例子可以參考。如果是乙個稍微有些經驗的設計師，基本上就不需要再找什麼參考就可以直接幾分鐘畫出乙個抓手。這裡為了說明整個設計需求的流程，找了些參考圖，如圖2。
圖2 抓手參考
對比現有的比較成熟的軟體，大家的做法就是把可以抓取的部分加入凹凸的顆粒，看起來好像摩擦力很大的樣子，這樣來示意這個區域是可以抓住拖動的。所以我們沿用這個規則就可以了，由於我們需要做的需求中可以拖拽的部分是邊而不是角，所以可以加入橫線的方式來做。好，我們來細化到畫素級別來完成這個需求吧
圖3 設計效果圖
設計稿很快就出來了，我們還可以放大看下細節。
圖4 設計效果圖放大400%效果
能夠很明顯的看出來，這個是用鉛筆畫了3個畫素的線，然後加了投影，我們再放大些看看。
圖5 放大1600%的效果
現在已經很細節了吧？在三個畫素高度的圖形上加入了高光，陰影還有過度，這個細節是不是已經做的很好了呢？呃，從放大圖上來看，好像，沒什麼問題，但是，這個時候我們回過頭來看看整個介面，忽然覺得有那麼一點「缺少細節」，這…什麼情況…
我們明明已經是細化到畫素級別了，為什麼還有些不安呢？仔細思考下，大概是這樣的：這個介面的元素都是圓潤的，包括投影，邊角都是一點點過度的，而我們的抓手部分卻是用畫素直接一點點畫出來的，所以，氣質上本身就有點問題。但是，三個畫素的高度上，我們可以做出圓潤的感覺嗎？實際上，你可以的。
先仔細思考下怎麼做會更好一點。因為這個需求屬於延續設計，所以需要先揣摩現有介面的設計思路。介面屬於擬物風格，上側稍微有點翹起，所以上邊緣有乙個畫素的高光，然後是自陰影，圓角也是很明顯的。所以我們需要做的，應該是乙個擬物化的，圓潤的抓手。為了讓抓手區域更明顯一點，我們甚至可以加入一點底色。
好，先看下完成稿。
圖6 設計定稿
現在看起來比較靠譜了，然後我們來看下「細節」實現。
圖7 400%放大效果圖
圖8 每個元素的實現示意
其實在第一稿上，大部分的東西我們都注意到了，只是再深入細化了一下，用路徑來勾勒圓潤的角度，用photoshop圖層樣式中的斜面浮雕，內發光來模擬凸起物本身的質感，而不是用一條條畫素點來生硬的勾勒。高光層做了細化，中間亮，兩邊暗一點。投影也用了投影和外發光兩層來模擬更真實一點的投影效果。至於新新增的底色，因為是貼在介面上的，所以需要順應介面本身的質感，頂層有乙個畫素的高光，然後是區域內陰影等等。
到這裡，這個介面細節優化就差不多了。總結起來，所謂細節，乙個層面是指，這個設計作品上，畫素級的東西有沒有用心去做，另乙個層面，細化到畫素級別之後，回過頭來看看，細化完的部分跟整個作品是否氣質統一。在這兩個層面上，第二個層面其實會更重要一點，但是往往會被忽略掉。設計師在做乙個作品的時候，需要時刻注意，細節與整體的關係，細節是為整體服務的，所以需要在理解整體的基礎上再去深化細節部分。
j
報表設計細節
一.小清新報表 1.表頭的設計 背景色 backgroud color rgb 108,202,205 字型顏色 color rgb 255,255,255 字型 font family 微軟雅黑 2.表內容設計 背景色 backgroud color rgb 195,237,233 字型顏色 co...
翻頁設計細節
首先乙個問題是 為什麼翻頁？其實問題很簡單，既當內容數量較多時，不能再一屏內展示完，或者是不能以無限拉評展示的時候就需要用不同的頁面來展示內容或資訊。這種問題多用於列表頁面和部分內容頁面。雖然翻頁的呈現方式大多類似，但是不同的細節卻決定使用者能不能更便捷的找到所需要的內容。如 現在具體記錄每乙個元素...
遊戲設計思想與細節
圓角矩形，選擇的字型，顏色，邊框，盡量搭配，突出主題，簡約而不簡單。有些時候，我們在創新的時候，往往會試圖改變其原有的設計，在改變之前必須了解之前的設計，為什麼會這樣設計，會與哪些模組關聯，如果沒有經過細緻的分析，不僅不會有錦上添花的效果，而且還會畫蛇添足。盡可能減少不必要的麻煩的操作，不是改變功能...