鏈接：http://www.shejidaren.com/15-shouji-xianqing-ye-sheji-xijie.html
前言：這是一篇掃盲式的手機詳情頁的設計細節文章，主要寫給0基礎的小白設計師的，大佬們笑一笑就好了，當然有錯誤的地方也懇求指正，不僅能讓我學習到知識，還能避免把人帶彎。
目的：做詳情之前得清楚詳情頁的核心目的，個人認為是展示產品賣點與傳遞產品信息，形成轉化，美觀是其次。
所以在製作詳情頁的時候得時刻記住自己主要想表達的是什麼，在信息傳達到位的前提下，可以檢查下下面的細節。
1. 一屏的尺寸
鑑於目前95%的詳情頁用戶都來自無線端，所以我們在做詳情頁的時候，有必要了解目前自己工作主要使用的平臺的尺寸是多少，這裡平臺以某寶為例，手機用iPhoneX，計算出了一屏可展示的高度，這樣自己在做詳情的時候就知道多高比較合適了。
2. 豎屏思維
既然用戶使用場景是手機，那麼在製作詳情的時候，儘量用豎著閱讀的方式去製作，而不是- -味地繼承電腦端的橫屏思維，將詳情縮小即可，另外推薦最小字體不小於18px。
3. 圖標設計
圖標在傳達信息的時候，比只有文字的時候效率要高，也更容易記住。在使用的時候注意統一性，切忌面性圖標和線性圖標混合使用，在使用線性圖標的時候，還要記得統一圖標的粗細。
04. 關於人物肖像
當需要出現多個人像的時候，最好使他們形象大小、方向、色調一致，眼睛在畫面的高度最好也統一，這樣有利於畫面和諧。
05. 圖形
馮叔說過圓形最好不要人為拉伸，因為這樣並沒有任何意義，並且還會人為是你做設計不夠細心造成的。
06. 圓角矩形
關於圓角矩形的大圓角，不是不可以用，但是大部分人用的不好，所以穩妥一點，我推薦圓角小一點，或者拉成半圓,會大氣很多。
07. 投影
黑顏色的投影其實也好用的，但是或許有更好的方式，試試加了紅色的黑色吧，也許看上去更乾淨一點。
08. 按鈕 & 搜索欄
憑感覺做的一般都是從業很多年的設計前輩了，如果不知道為什麼別人做出來好看，可以試著分析下按鈕的負空間，與單個字體之間的比例，做出來的按鈕整體效果要比之前的大氣哦。
09. 箭頭
很多初學者習慣偷懶用英文的符號代替，但是往往細節決定成敗，隨便畫一個矩形，刪除一個錨點，旋轉45就能畫出來，記住統一成文字的筆畫粗細。
10. 字體搭配
在對於字體個性不太瞭解的情況下，黑體搭配黑體、宋體搭配宋體，是不會有錯的(黑宋搭配是比較難掌握的)，但是搭配的時候需要注意，英文在同字號的時候行高沒有漢字高，需要加大1-2個字號，同時字重需要匹配。
11. 標題與正方
標題與正文，想要搭配的好看，前期推薦用計算器，固定好標題文字大小或者內文文字大小，然後用1.414、1.5、1.618、1.732、2、3等比例進行運算，內文的行距也是同樣的道理，然後推薦大家文字大小用偶數，大小變換輸入數值，這樣可以在最後導出圖片的時候，避免某些意料之外的瑕疵。
12. 輔助線
推薦拉輔助線的是按住shift，輔助線會以1、10這樣的整數變化，不會出現小數點的輔助線，避免在對齊的時候出現1px的誤差，被說成是粗心的失誤。
13. 閱讀順序
對於一個步驟，試試用1、圖、文字的順序，跟圖、1、文字的順序閱讀，就知道哪個更流暢，更能帶來良好的用戶體驗。
14. 標題推導
當你的詳情中，有多屏視覺頁展示的單頁，且文字適合排在上方的時候，儘量讓這個文字在每屏中的位置一樣，這樣會讓你的設計看起來很規整，也很有設計感。
注：部分圖片來自網絡，僅用於學習交流之用途。
閱讀更多 頂點設計 的文章
