UI尺寸規范

一、電商頁面基本原則

1、界面尺寸:1920-2000px帶有底圖必須那么大(無底圖的1366-2000px)

2、版心:980-1220px

3、Banner高度建議870px;

4、分辨率72px

5、色彩模式RGB

6、按鈕高度為文字字高的的2-2.5倍

7、字體

導航:14px

字體:宋體 微軟雅黑

字號:12、14、16、18、20px

專題頁字體建議是12、14px,電商主頁建議:16、18、20px

8、焦點圖高度:600px-700px

二、登錄框尺寸

1、尺寸:730x320px

2、登錄界面的字體:12px 宋體 字體樣式無

3、文本框高度為文字字高的的2-2.5倍

4、頭標與框高度為20px

三、企業站

1、企業占中顏色盡量控制在三種以內

2、背景色:70% ? ? 主色調:25% ? ? 強調色:5%

背景有底紋畫布大小建為1920-2000px

背景無底紋畫布大小建為1366-2000px

4、版心寬度 980px 或 1000px 左右

5、焦點圖高度小于580px 底部坐標到580px

6、在做企業站中要使用統一字體:宋體(Banner圖除外)

字體字號規范:

1、頭部注冊、登錄:12px 宋體

2、導航:16 18px 仿粗? ? 底色塊高度為字高的2-2.5倍

下拉導航與導航為從屬關系建議使用小一號字體14px

內容區域的文字一般分為標題和正文兩種,可以選擇統一字號,用仿粗區分

文字區域到表框的邊距一般為10px-20px;

版權信息文字用12px

四、照片尺寸

1、1寸:2.5x3.5cm ? ? 5寸:12.7x8.9cm

證件照拼版建議畫布大小為12.7x8.9cm

名片規范

橫版:90x54mm? 90x55mm

豎版:50x90mm? 45x90mm

圓角名片:85x54mm

折疊名片尺寸不固定

使用材質:紙張(大于200g)

四色印刷:CMYK? ? ? 出血值1mm

名片的主要內容:公司名稱? LOGO? ? 姓名? 職務? 聯系方式? 業務范圍

名片的排版:

1、名片邊緣留足5-10mm距離

2、logo大小不能小于1cm

3、名片中最小的文字不能小于6px

名片的儲存于輸出:

1、將所有文字轉曲(交與客戶源文件)ctrl+a-? ? ctrl+shift+o

2、交與印刷廠PDF格式,不保留AI編輯功能

3、加入出血值

x展架、易拉寶

1、x展架尺寸:60x160cm? 80x180cm

易拉寶:高200cm? 寬80? 90? 100? 110? 150cm? 常見的為80*200cm

展架、易拉寶輸出方式為寫真機,寫真機輸出幅面一般為:90? 120? 150cm

易拉寶輸出材質:相紙(背面無膠)

展架:背膠紙(背面有膠) 裝裱在KT版上

輸出方式:寫真:1軟件可以使用ps軟件(黑色為四色黑)

2、顏色模式可以為RGB也可以用CMYK

3、文檔建立尺寸和實際尺寸一致,不需要加出血

4、展架易拉寶分辨率為72或80,特殊情況可以使用300(封面)

5、查看畫布效果時,縮放比例為100%

6、使用黑色必須為四色黑(CMYK都為100),不能使用單色黑,使用單色黑,制作出的易拉版展架會有條紋。

7、背景的過度使用弱對比:色相H接近或相同,飽和度S差值在30以內或者明度B差值在30以內

8、強對比(背景與要突出的產品或文案):色相H相反,飽和度S差值在70以內或者明度B差值在70以內。

折頁(出血3):紙張一般為157g銅版紙

1、四色印刷----CMYK(專色印刷要出專色版)

2、成品尺寸:制作一個90*120的三折頁(從印刷廠制作完成后并且折疊后的尺寸)

2、展開尺寸:寬度 90+90+90=270? 高度210

2、制作尺寸:展開尺寸+出血

2、大16K:210*285 毫米 ? ? ?成品尺寸 :95*210或90*210 ? ? 正度16K:185*260毫米

五、APP

iOS尺寸規范:

iPhone:320x480? 640x960? 640x1136? 750x1334? 1080x1920

Ipad:1024x768? 2048x1536

Android:482x800? 720x1280? 1080x1920

Ipad、iPhone:狀態欄:40px

導航欄:88px

主菜單欄:98px

內容區域:910px

Android:

狀態欄:50px

導航欄和主菜單欄:96px

內容:1038px

1、iphone英文字體為Helvetica,中文為華為細黑,冬青黑體,不用微軟雅黑。

2、可點擊對象的區域:尺寸不要小于44*44px;

六、智能電視

分辨率模式:1920×1080、1280×720 我們常用還是1920×1080的分辨率進行設計

顏色與分辨率

1、不要使用純白色(#FFFFFF)可采用#F0F0F0

2、高飽和度顏色盡可能少用,會顯示失真

3、大范圍漸變會導致帶狀顯示,無法達到平滑過渡

4、在界面邊緣最好留出10%左右的空間(54PX)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 平面 名片(制作軟件為矢量軟件,如AI) 設計尺寸(標準尺寸):90*54mm、90*50mm、90*45mm 出...
    顏冉竹閱讀 18,008評論 2 45
  • 聲明:此次是收集互聯網整理,如有侵權請聯系本人進行刪除 ps:如果大家有的也可以和我討論,希望你們能提出寶貴建議,...
    小向資源網閱讀 6,336評論 2 33
  • 使用sketch最重要的一點是設計好控件的規范。 為做好設計規范需要對色彩進行編號,比如:color_a”_1,c...
    youyeath閱讀 26,295評論 2 237
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,801評論 1 92
  • iphone 6 plus設計版:1242*2208 ppi:401ppi 狀態欄高度:60px 導航欄高度:13...
    youyeath閱讀 47,319評論 0 24