火星網(wǎng)校
UI界面設(shè)計技巧，APP詳情頁設(shè)計細(xì)節(jié)和規(guī)范
發(fā)布時間：2024-04-13 11:12:19 瀏覽量：370次
這是一篇掃盲式的手機詳情頁設(shè)計細(xì)節(jié)文章，主要寫給0基礎(chǔ)小白的，不僅能學(xué)習(xí)到知識，還能避免走彎路。
做詳情之前得清楚詳情頁的核心目的，個人認(rèn)為是展示產(chǎn)品賣點與傳遞產(chǎn)品信息，形成轉(zhuǎn)化，美觀是其次。
所以在制作詳情頁的時候得時刻記住自己主要想表達(dá)的是什么，在信息傳達(dá)到位的前提下，可以檢查下下面的細(xì)節(jié)。
01
一屏的尺寸
鑒于目前95%的詳情頁用戶都來自無線端，所以我們在做詳情頁的時候，有必要了解目前自己工作主要使用的平臺的尺寸是多少，這里平臺以某寶為例，手機用iPhoneX，計算出了一屏可展示的高度，這樣自己在做詳情的時候就知道多高比較合適了。
02
豎屏思維
既然用戶使用場景是手機，那么在制作詳情的時候，盡量用豎著閱讀的方式去制作，而不是- -味地繼承電腦端的橫屏思維，將詳情縮小即可，另外推薦最小字體不小于18px。
03
圖標(biāo)設(shè)計
圖標(biāo)在傳達(dá)信息的時候，比只有文字的時候效率要高，也更容易記住。在使用的時候注意統(tǒng)一性，切忌面性圖標(biāo)和線性圖標(biāo)混合使用，在使用線性圖標(biāo)的時候，還要記得統(tǒng)一圖標(biāo)的粗細(xì)。
04
關(guān)于人物肖像
當(dāng)需要出現(xiàn)多個人像的時候，最好使他們形象大小、方向、色調(diào)一致，眼睛在畫面的高度最好也統(tǒng)一，這樣有利于畫面和諧。
05
圖形
圓形最好不要人為拉伸，因為這樣并沒有任何意義，并且還會認(rèn)為是你做設(shè)計不夠細(xì)心造成的。
06
圓角矩形
關(guān)于圓角矩形的大圓角，不是不可以用，但是大部分人用的不好，所以穩(wěn)妥一點，我推薦圓角小一點，或者拉成半圓,會大氣很多。
07
投影
黑顏色的投影其實也好用的，但是或許有更好的方式，試試加了紅色的黑色吧，也許看上去更干凈一點。
08
按鈕&搜索欄
憑感覺做的一般都是從業(yè)很多年的設(shè)計前輩了，如果不知道為什么別人做出來好看，可以試著分析下按鈕的負(fù)空間，與單個字體之間的比例，做出來的按鈕整體效果要比之前的大氣哦。
09
箭頭
很多初學(xué)者習(xí)慣偷懶用英文的符號代替，但是往往細(xì)節(jié)決定成敗，隨便畫一個矩形，刪除一個錨點，旋轉(zhuǎn)45就能畫出來，記住統(tǒng)一成文字的筆畫粗細(xì)。
10
字體搭配
在對于字體個性不太了解的情況下，黑體搭配黑體、宋體搭配宋體，是不會有錯的(黑宋搭配是比較難掌握的)，但是搭配的時候需要注意，英文在同字號的時候行高沒有漢字高，需要加大1-2個字號，同時字重需要匹配。
11
標(biāo)題與正方
標(biāo)題與正文，想要搭配的好看，前期推薦用計算器，固定好標(biāo)題文字大小或者內(nèi)文文字大小，然后用1.414、1.5、1.618、1.732、2、3等比例進(jìn)行運算。
內(nèi)文的行距也是同樣的道理，然后推薦大家文字大小用偶數(shù)，大小變換輸入數(shù)值，這樣可以在最后導(dǎo)出圖片的時候，避免某些意料之外的瑕疵。
12
輔助線
推薦拉輔助線的是按住shift，輔助線會以1、10這樣的整數(shù)變化，不會出現(xiàn)小數(shù)點的輔助線，避免在對齊的時候出現(xiàn)1px的誤差，被說成是粗心的失誤。
13
閱讀順序
對于一個步驟，試試用1、圖、文字的順序，跟圖、1、文字的順序閱讀，就知道哪個更流暢，更能帶來良好的用戶體驗。
14
標(biāo)題推導(dǎo)
當(dāng)你的詳情頁中，有多屏視覺頁展示的單頁，且文字適合排在上方的時候，盡量讓這個文字在每屏中的位置一樣，這樣會讓你的設(shè)計看起來很規(guī)整，也很有設(shè)計感。
curricula
六維全息課程體系
小獅視覺全鏈路UI/UE設(shè)計
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
