web網頁、手機app設計規範

網頁設計規範

新建ps文件時，寬度爲1920、單位爲像素、顏色模式爲rgb、高度自定義：

 

1、網頁設計尺寸

製做網頁時咱們選用的分辨率是72像素/英寸，使用的畫布尺寸1920px*1080px。但並不表明咱們能夠在整個畫布上做圖。

網頁的佈局主要有兩種：左右型佈局和居中型佈局。佈局的不一致，使可設計的空間也不相同。

 

左右結構型

一、左右佈局，靈活性強，UI的限制小；

二、左邊通欄爲導航欄，寬度沒有具體的限時，能夠根據實際狀況進行調整；

三、右側爲內容板塊範圍，是網站內容展現區域。

 

居中型

四、居中佈局，中間的黃色部分爲有效的顯示區域，用於網站內容的展現。

五、換句話說，兩邊均爲留白，沒有實際用途，只是爲了適配而存在。

六、內容限時區域在好控制在1000px-1200px。

2、經常使用字體

如今網頁的佈局咱們已經瞭解了，那麼接下來就是網頁中經常使用到的字體。

字體設計的總原則是：可辨識性和易讀性。

中文建議使用微軟雅黑字體，英文則建議使用arial 字體。經常使用的字體大小號有如下幾種：

 

一、12px是用於網頁的最小字體，適用於突出性的日期，版權等註釋性內容。

二、14px則適用於非突出性的普通正文內容。

三、16px或18px適用於突出性的標題內容。

四、網站的字體大小並無硬性規定具體的字號，根據實際狀況能夠酌情考慮，可是要有限適用偶數字號。

五、字體規格也不須要太多，最好適用三種混搭。若是須要更多

六、層次的區別，能夠改變字體顏色或加粗來體現。

3、字體間距溫馨範圍

相鄰兩個文字的間距，其實不須要太過介意，除了特殊的需求以外，均可以使用默認數值的間距。

一、行間距，推薦以字體大小的1.5-2倍做爲參考；

二、段間距，推薦以字體大小的2-2.5倍做爲參考。

三、當選用14px字體時，行間距：21-28px; 段間距：8px-35px

四 、字體顏色設計技巧

一、主文字的顏色，建議使用公司品牌的VI顏色，可提升公司網站與公司VI之間的關聯，增長可辨識性和記憶性。

二、正文字體顏色，保險起見，選用易讀性的深灰色，建議選用#333到#666以前的顏色。

三、輔助性的，註釋類的文字，則能夠選用#999999之類的比較淺的顏色。

若是，你對顏色駕馭能力比較強，你也能夠選擇偏公司VI顏色的深色，做爲正文字體顏色或者輔助性文字的顏色。

例如公司的品牌是藍色，那麼正文就能夠選用偏藍色的深色。這樣處理以後，文字就有了環境色，網站總體將更加和諧。

 

深灰色 偏藍色

5、其餘須要注意的事項

作網頁設計時，你還要特別注意網頁的首屏內容，在構圖和內容呈現上，首屏模塊的設計相當重要。

一、除去任務欄，瀏覽器菜單欄以及狀態欄的高度，剩下的是首屏高度。

二、Window XP 的首屏高度平均值爲580px, window 7 的首屏高度平均值是710px。

三、綜合考慮到 Window XP 已經退出市場，在實際操做時，咱們以710px做爲依據。

以下圖，黃色區域是咱們設計時要着重考慮的首屏範圍

 

另外，是關於圖片尺寸問題。須要全屏顯示的圖片，寬度尺寸嚴格設計爲1920px。可是值得注意的是，圖片內容的有效範圍不能超過網頁內容的有效範圍，控制在1200px之內，以避免遇到小屏設備時顯示不全，而形成信息遺漏。

說到這裏，網站設計規範部分的內容就算是講完了，固然上面的全部規範也只是規範，不要由於這些規範去限制本身的想法，規範是用來打破的，設計最重要的仍是設計得美觀，設計的時候具體要給多大的數值，取決於設計師，規範是用來參考的。

 

app設計規範

目前，不少APP設計師的APP Ui設計稿是先作iPhone6的，方便向上適配iPhone6Plus，也方便向下適配iPhone5和iPhone4的尺寸。這一節課也算是25學堂爲你們精心整理的iPhone6界面設計尺寸規範大全。

固然下面的10個方面的不只是iPhone6界面視覺設計尺寸規範，也是iPhone6界面原型設計尺寸規範。值得APP設計師和APP產品經理好好的閱讀。

因此，ios系統平臺上的APP交互設計稿的尺寸，就按照iPhone6的尺寸來作。

尺寸大小以下：750*1334px

詳細的iPhone 6界面 APP首頁設計教程：小白學習APP界面設計，從設計APP首頁開始

 

一、 iPhone6的界面佈局是：屏幕是4.7英寸的，設計稿的大小爲750x1334px。

☆  狀態欄(status bar)：就是電量條，其高度爲：40px；

☆  導航欄(navigation)：就是頂部條，其高度爲：88px；

☆  主菜單欄(submenu，tab)：就是標籤欄，底部條，其高度爲：98px；

☆  內容區域(content)：就是屏幕中間的區域，其高度爲：1334px-40px-88px-98px=1108px

截圖以下：

點擊查看：完整版的iPhone 6界面設計尺寸規範

另外25學堂跟你們推薦3款 測量標註工具爲：

MarkMan馬克鰻，Dorado標註，PXcook像素大廚。

一、Android APP界面標註、尺寸換算和APP標註工具

二、移動APP設計之PS切圖插件大彙總，值得收藏

 

 

二、關於iPhone6的圖標的尺寸：

導航欄的圖標高度爲44px左右，標籤欄的圖標尺寸爲50x50px左右，最大爲96x64px。

關於iPhone6的文字的尺寸：

導航欄的文字大小最大值是34-36px，標籤欄的圖標下方的文字大小爲20px。

內容區域的文字大小是：20px   24px，26px，28px，30px，32px，34px。

 

擴展閱讀：iphone6/6+的適配原理和適配心得分享

APP設計必備素材：iPhone6手機模板素材下載

 

 

三、（iPhone6設計稿尺寸是@2x），

作原型圖的時候，能夠作成@2x的，即750x1334px；也能夠作成@1x的，即375*667px。

 

四、設置界面的圖標高度和開關滑動按鈕的圖標高度：58px。

參考下圖：

 

五、關於顏色，自從我作了3套高保真的交互原型圖以後，發現後面仍是改爲畫線框圖來的快。

線框圖的黑白灰之純美，有利於專心佈局界面，而不用在乎界面的顏色搭配。

黑白灰顏色經常使用的數值是：

① 文字黑色#282828

② 文字深灰色#656565

③ 文字淺灰色#98989

④ 邊框淺灰色#C3C3C3

⑤ 背景淡灰色#f2f2f2

⑥ 按鈕背景純白色#ffffff

 

 

六、經常使用的可點擊高度，在iPhone6的原型圖上，統一成88px。在iPhone6設計稿中，88px是一個經常使用的設計尺寸。

參考圖片以下，

 

七、搜索欄的高度，在iPhone6的原型圖上，統一成58px。

在iPhone6設計稿中，58px 也是一個經常使用的設計尺寸。

參考圖片以下，

 

 

八、在iPhone6設計稿中，界面元素之間的經常使用距離，親密距離：20px；疏遠距離：30px。

A、疏遠距離：好比，全部元素距離手機屏幕最左邊的距離。

B、親密距離：好比，左邊圖標與右邊文字之間的距離。

參考圖片以下，

 

九、原型設計中，須要考慮不一樣屏幕尺寸的蘋果手機，在@1x的狀況下的適配狀況。

好比：

☆  iPhone5在@2x屏幕尺寸是，640x1136px；對應的@1x，屏幕尺寸就是320x568px；

☆   iPhone6在@2x屏幕尺寸是：750x1334px；對應的@1x，屏幕尺寸就是375x667px；

☆   iPhone6Plus在@3x屏幕尺寸是：750x1334px；對應的@1x，屏幕尺寸就414x736px；

 

參考圖片以下：

 

 

十、iPhone6Plus的@3x，iPhone6的@2x, iPhone5的@2x的介紹

☆  iPhone6Plus是5.5英寸屏幕，1242x2208px-@3x的像素分辨率，邏輯分辨率是414x736pt-@1x。物理尺寸是1080x1920px。這個物理尺寸，也是安卓機目前最流行的大屏設計稿尺寸。

☆  iPhone6是4.7英寸屏幕，750x1334px-@2x的像素分辨率，邏輯分辨率是375x667pt-@1x。

☆    iPhone5是4英寸屏幕，640x1136px-@2x的像素分辨率，邏輯分辨率是320x568pt-@1x。

參考圖片以下：

 

【綜上所述】iPhone6的原型規範以下：

一、界面尺寸佈局：滿屏尺寸750x1334px

二、高度電量條高度40px，導航欄高度88px，標籤欄高度98px；

三、各區域圖標大小導航欄圖標44px，標籤欄圖標50px；

四、各區域文字大小電量條文字22px，導航欄-文字32px，標籤欄字20px；

五、經常使用的文字大小：32px，30px，28px，26px，24px，22px，20px；

六、經常使用的顏色：背景淺灰色#f2f2f2,文字深黑色#323232，邊框色深灰#CCCCCC；

七、經常使用可點擊區域的高度：88px；

八、單行文字的背景框的高度：88px，雙行則爲：176px，三行則爲：264px；

九、經常使用間距：親密距離：20px；疏遠距離：30px，其它距離：10px，44px等；

十、按鈕和文本框，原型圖作成直角的，圓角半徑是多少，由Ui來設計；

十一、這種狀況，須要修改原型。單個頁面的邏輯流程圖或用戶學習使用時間，超過其它頁面平均數的3倍以上；

十二、以上全部的規範僅供參考，該調整和修改的地方能夠調整。具體狀況具體分析。