正文

ui設(shè)計規(guī)范文檔怎么寫（ui設(shè)計規(guī)范文檔怎么寫好）

發(fā)布時間：2023-04-04 03:25:59 稿源：創(chuàng)意嶺閱讀： 99 當(dāng)前文章關(guān)鍵詞排名出租

大家好！今天讓小編來大家介紹下關(guān)于ui設(shè)計規(guī)范文檔怎么寫的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

1、UI界面設(shè)計規(guī)范有哪些？
2、UI設(shè)計中的標(biāo)注規(guī)范，你知道嗎？
3、UI設(shè)計的規(guī)范標(biāo)準(zhǔn)有哪些
4、UI設(shè)計規(guī)范-字體

ui設(shè)計規(guī)范文檔怎么寫（ui設(shè)計規(guī)范文檔怎么寫好）

一、UI界面設(shè)計規(guī)范有哪些？

一、字體

iOS的字體：

中文字體：蘋方 / PingFang SC

CSS：Font-Family：PingFang SC

英文、數(shù)字：Helvetial

Andioid的字體：

中文字體：思源黑體 / Noto Sans Han

英文、數(shù)字：Roboto

二、規(guī)范

1、 iPhone界面尺寸

ui設(shè)計規(guī)范文檔怎么寫（ui設(shè)計規(guī)范文檔怎么寫好）

2、 iPhone圖標(biāo)尺寸

ui設(shè)計規(guī)范文檔怎么寫（ui設(shè)計規(guī)范文檔怎么寫好）

3、 iPad的設(shè)計尺寸

ui設(shè)計規(guī)范文檔怎么寫（ui設(shè)計規(guī)范文檔怎么寫好）

4、 iPad的圖標(biāo)尺寸

ui設(shè)計規(guī)范文檔怎么寫（ui設(shè)計規(guī)范文檔怎么寫好）

5、 Andioid的圖標(biāo)尺寸

ui設(shè)計規(guī)范文檔怎么寫（ui設(shè)計規(guī)范文檔怎么寫好）

6、Andioid的dp/sp/px換算表

ui設(shè)計規(guī)范文檔怎么寫（ui設(shè)計規(guī)范文檔怎么寫好）

三：小結(jié)

iPhone的主流設(shè)計尺寸：750x1334 px

1242x2208 px

Andioid的主流設(shè)計尺寸：720x1280 px

1080x1920 px

二、UI設(shè)計中的標(biāo)注規(guī)范，你知道嗎？

1.尺寸

我們要將頁面上有所需要告知尺寸的內(nèi)容進行標(biāo)注，例如圖標(biāo)、圖片、頭像等等。關(guān)于尺寸維度的標(biāo)注我們需要注意的是：有圓角的地方，需要將圓角半徑標(biāo)出。

ui設(shè)計規(guī)范文檔怎么寫（ui設(shè)計規(guī)范文檔怎么寫好）

對于一些控件，如button、列表，一定要隨時問自己有沒有特殊狀態(tài)，如按壓狀態(tài)、無效狀態(tài)、選中狀態(tài)等等，如果你不標(biāo)明，開會就會默認沒有這些效果。一般情況下，圖片的尺寸是需要告訴比例的，而不是固定的大小，這樣開發(fā)才能更好的適配，常用的圖片比例有4：3、16：9等。

所以正確的標(biāo)注方法是給出按鈕兩邊的間距，讓整個按鈕的寬度自適應(yīng)(當(dāng)然高度還是要固定的),這樣不論遇到哪種分辨率的尺寸，都能夠保持相同的視覺效果，擴展性極強。

2.文字

文字，需要標(biāo)注文字的大小、字體、顏色、透明度、行高等等，當(dāng)然也可以和開發(fā)進行溝通，對一些內(nèi)容進行刪減。關(guān)于文字的標(biāo)注需要注意的事項：文字有一個很特殊的屬性，就在某些場景下，文字是動態(tài)的，所以這個時候，就需要將極限情況考慮清楚。

3.間距

有人可能會覺得間距和尺寸有些相似，但其實它們有著很大的不同，我們可以這樣理解：尺寸是形容容器的大小，而間距是形容容器之間的距離。間距相對比較簡單，只要標(biāo)注清晰就不會有太大問題。

4.顏色

需要標(biāo)注顏色的內(nèi)容有分割線顏色、背景色、按鈕顏色等等。關(guān)于顏色的標(biāo)注需要注意的事項：切記文字的顏色已經(jīng)歸類到文字屬性里面，不用重復(fù)標(biāo)注，思路一定要保持清晰。

以上就是小編關(guān)于UI設(shè)計中的標(biāo)注規(guī)范的分享，希望對大家有所幫助，想要了解更多UI設(shè)計相關(guān)內(nèi)容，請關(guān)注本平臺，小編會做及時的整理并發(fā)布的，大家注意查看哦!

三、UI設(shè)計的規(guī)范標(biāo)準(zhǔn)有哪些

UI即User Interface(用戶界面)的簡稱，UI設(shè)計是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計，好的UI設(shè)計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。

在飛速發(fā)展的電子產(chǎn)品中，界面設(shè)計工作一點點的被重視起來，做界面設(shè)計的“美工”也隨之被稱之為“UI設(shè)計師”或“UI工程師”，其實軟件界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要賣點，一個產(chǎn)品擁有美觀的界面會給人帶來舒適的視覺享受，拉近人與商品的距離，是建立在科學(xué)性之上的藝術(shù)設(shè)計，那么，UI設(shè)計的規(guī)范標(biāo)準(zhǔn)有哪些呢？

一、軸

軸在UI設(shè)計中是最基本、最常見的概念，也是用來組織界面結(jié)構(gòu)的重要核心。

簡單說來，軸是在設(shè)計的時候組織一系列元素的假象線，在下面的設(shè)計圖中，軸以虛線的方式被標(biāo)注出來。

1、對齊

軸最常見于對稱元素的使用，當(dāng)元素被布置成軸對稱的布局的時候，會給人有序感。就像生活中絕大多數(shù)的事情一樣，我們更傾向于享受有序的的東西，它們令人感覺平穩(wěn)、舒適、平易近人。

最簡單的一個例子就是iTunes程序中的專輯列表的設(shè)計，所有的專輯列表在界面的左側(cè)保持對齊，圍繞虛線軸軸對稱。

2、強化

雖然軸是一條假想的線，但是如果周圍的元素的邊緣控制得足夠整齊，這跳線會在視覺中變得更加“明顯”的。

最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸，如果一邊有建筑一邊沒有，那么這種軸線的感覺不會那么強烈。

從產(chǎn)品設(shè)計的角度上來看，Twitter的時間線設(shè)計就是一個很好的案例，左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺。

3、運動

當(dāng)我們碰到某先線條的時候，視覺會很自然地沿著這些方向運動，就如同我們站在街上，會自覺地沿著街道的兩頭走動。兩個端點決定了線，界定了開始和結(jié)束的地方，線或者說軸線的存在會引導(dǎo)和提示運動的方向。

SoundCloud中，音軌沿著一條既定的水平軸線運動，隨著音樂的播放，音軌自然地自左向右勻速運動（具體可查看馬海祥博客《如何利用動效設(shè)計吸引訪客的注意力》的相關(guān)介紹）。

4、連續(xù)性

如果終點是不確定的，那么你通常會沿著軸線的方向瀏覽/運動，直到你找到感興趣的東西，或者感到厭倦并關(guān)閉應(yīng)用。

在建筑學(xué)中，未清楚界定的終點非常少見，因為建筑的修建通常沒法永遠持續(xù)下去，但是UI設(shè)計則不一樣，無限地滾動下去是無比受歡迎的設(shè)計手法。

Pinterest的APP中就是這樣做的，持續(xù)不斷的圖片沿著中軸線的方向持續(xù)不斷地滾動下去，只要你有興趣一直觀看下去。

二、對稱

當(dāng)元素被均勻地放置在軸線的兩側(cè)之時，他們構(gòu)成了對稱的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對應(yīng)之時，它們就形成了完美對稱。

1、平衡

對稱令整個設(shè)計更加平衡，當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時，會給人以協(xié)調(diào)和諧的設(shè)計感。

當(dāng)我們在規(guī)劃街道兩側(cè)的房屋建設(shè)的時候，如果左右兩側(cè)都是5間大小一致的房子，當(dāng)你走在街上的時候這種平衡的設(shè)計會令人非常舒適，這是平衡給人的感受。

Rdio的APP設(shè)計就遵循著這樣的設(shè)計規(guī)則，屏幕兩側(cè)的控件是相同的規(guī)格，這類布局很適宜閱讀，用戶會自覺地自上到下，從左向右查看。

2、不對稱

如果軸線兩側(cè)的控件布置不再是一一對應(yīng)尺寸相近，那就是不對稱的設(shè)計，不對稱的設(shè)計會給人明顯的失衡感，可能會令人不舒服，但是也能造就殘缺美，當(dāng)然這要看你具體怎么做。

雖然Pinteret的APP設(shè)計在整體上是沿著中軸線對稱的(寬度一致)，但是兩邊的界面控件并非是對稱的，它們的高度并不一致，位置也是錯落的，稍微一點的落差都會被眼睛捕捉到，而這樣的差異讓用戶無法準(zhǔn)確地左右順序閱讀，不對稱設(shè)計打破了設(shè)計的平衡性和舒適性，但是也可以緩解了規(guī)律性設(shè)計帶來的視覺疲勞。

三、層級

當(dāng)某個元素出現(xiàn)在比其他元素更重要的位置的時候，層級就出現(xiàn)了。

1、尺寸

如果一個設(shè)計元素在尺寸上比其他的控件更大，就會區(qū)分出層級。毫無疑問，我們查看某個設(shè)計的時候，通常會被最大的元素吸引到。如果一個建筑物有5個出窗戶，其中一個是其他四個的兩倍大，我們的注意力自然而然會被吸引過去。

通過尺寸來區(qū)分文章列表層級的典型就是稍后讀應(yīng)用Pocket，頂部的輪播文章?lián)碛懈蟮膱D片，它的位置和尺寸會令我們一眼注意到（具體可查看馬海祥博客《詳解移動端設(shè)備頁面尺寸設(shè)計原理》的相關(guān)介紹）。

2、形狀

如果一個控件在形狀和形態(tài)上同其他的不一樣，也可以讓它獨立出一個層級，不規(guī)則的設(shè)計同樣會令人側(cè)目，建筑物的正面擁有五個相同的窗戶和一閃大門，你會立刻注意到門的獨特之處。

在Instagram的個人信息頁中，圓形的個人頭像在方形的圖片中別具一格，非常抓人眼球。它會讓人意識到，這個獨特的東西，更為重要。

3、位置

位置的存在同樣能彰顯層級的不一樣，在圓圈之內(nèi)，中心位置的東西比邊緣部分的看起來更重要，位于軸線頂端的控件會顯得比其他部分的優(yōu)先級更高。

以設(shè)計應(yīng)用Path的設(shè)計為例，時間軸頂點處的用戶頭像就明顯比時間軸上的其他部分更重要，而這個地方正好展示的也是用戶頭像。

四、韻律