News & Events

新聞動態

所在位置:

首頁新聞動態建站經驗網頁設計師須了解的UI設計規范

網頁設計師須了解的UI設計規范

時間:2020-12-05 09:13:00瀏覽次數:15
一、圖標規范 很多設計師以為UI設計就是設計圖標。雖然事實并非如此,但圖標的設計在整個UI設計中是比較基礎的一個環節。 圖標與品牌標志一樣,在設計時都需要做適當的減法,應該盡量用簡約的線條去表達其含義,應該盡量避免出現線條結構過于復雜的設計,而且整體的圖標都需要保持風格一致,例如圖標的線條粗細、邊角弧度、圖標高度寬度比例、風格

       一、圖標規范    

       很多設計師以為UI設計就是設計圖標。雖然事實并非如此,但圖標的設計在整個UI設計中是比較基礎的一個環節。    

       圖標與品牌標志一樣,在設計時都需要做適當的減法,應該盡量用簡約的線條去表達其含義,應該盡量避免出現線條結構過于復雜的設計,而且整體的圖標都需要保持風格一致,例如圖標的線條粗細、邊角弧度、圖標高度寬度比例、風格等等。 

網站建設   

       特別是對于新人,所以大家一起來看看圖標設計的規范吧:    

       1、像素對齊    

       需要嚴格的做到像素對齊,尤其是在做較小尺寸的圖標時,如果不嚴格的遵循像素對齊,那zui終的顯示效果就會出現問題。    

       2、多用布爾運算    

       在做網頁設計圖標的時候,能用基本圖形進行布爾運算的時候,盡量不要使用鋼筆,這樣做的好處有如下幾點:    

  • 讓你的圖標更加規范;            

  • 對圖形結構理解更加深刻;            

  • 后期更改形狀更加方便            

       3、獨特的風格    

       在做系列網頁圖標設計的時候,一定要在前期給圖標設定一個風格及原則,使之看起來與眾不同。    

       在這里值得一提就是,我們在做線性圖標時,一定要保證描邊粗細相同、圓角相同,如果這些基礎的規則都沒有遵循,那也就談不上風格的統一、創新了。    

       4、視覺大小統一    

       在進行網頁圖標設計的時候,我們會使用柵格輔助線來幫助我們更加嚴格謹慎,但一定不要被輔助線困住,學會靈活運用,保持視覺上的大小統一。    

       在如今的APP設計環境當中,一些APP設計大牛都一直強調,設計師要為有品牌意識。那么,在圖標的設計中,我們也必須強調“品牌性”,簡單的說就是把品牌中的抽象的概念變成具象化的圖形,把品牌主副色調應用到圖標設計中。同時建議大家每個星期完成一個主題的作品,提升自己的平面設計能力。    

       二、標注規范    

       如何把標注的思路整理清晰——結構化思維進行拆解,將大問題拆解成小問題,逐一擊破!    

       標注主要是以下四種不同屬性的內容:尺寸、文字、間距、顏色。    

       在進行標注時,首先去除導航欄和標簽欄,因為這些控件通用性非常強,需要單獨拿出來進行統一標注,這里我們只對內容區來進行標注示例。    

       1、尺  寸    

       我們要將頁面上有所需要告知尺寸的內容進行標注,例如圖標、圖片、頭像等等。關于尺寸維度的標注我們需要注意的是:    

       有圓角的地方,需要將圓角半徑標出。    

       對于一些控件,如button、列表,一定要隨時問自己有沒有特殊狀態,如按壓狀態、無效狀態、選中狀態等等,如果你不標明,開會就會默認沒有這些效果。    

       一般情況下,圖片的尺寸是需要告訴比例的,而不是固定的大小,這樣開發才能更好的適配,常用的圖片比例有4:3、16:9等。    

       很多沒有經驗的設計師不理解適配的原理,所以很容易將一些控件給出固定的尺寸大小,如果你將這個按鈕的寬度和高度都標注出來,開發就會將這個按鈕的大小寫死,一旦遇到屏幕(白色區域)較寬的時候,按鈕還是固定大小,就會影響視覺效果。所以正確的標注方法是給出按鈕兩邊的間距,讓整個按鈕的寬度自適應(當然高度還是要固定的),這樣不論遇到哪種分辨率的尺寸,都能夠保持相同的視覺效果,擴展性極強。    

       2、文  字    

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

       表面上我們將標題文字的大小、顏色這些內容標注清楚就可以了,但是如果標題文字過多的時候該怎么處理呢?所以必須要給出一個極限情況的規范,比如zui多顯示多少個字符,字符超過極限值就用打點的方式處理。    

       3、間  距    

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

       4、顏  色    

       需要標注顏色的內容有分割線顏色、背景色、按鈕顏色等等。關于顏色的標注需要注意的事項:切記文字的顏色已經歸類到文字屬性里面,不用重復標注,思路一定要保持清晰。    

公司正在年度優惠活動中!獲取報價請電話或留言!我們會馬上為您服務!

廈門
廈門市思明區軟件園二期望海路19號之二3層
福州
福州市倉山區金山街道浦上大道216號福州倉山萬達廣場C區C3號樓6層
泉州
泉州晉江市青陽泉安中路與湖光路交叉處嘉誠商廈10層
導航
今p3开机号金码 麻将代理的提成 百家乐网页游戏_Welcome 山西11选5开奖号码 官方手机彩票投注站 理财网站 沈阳二手麻将机转让 足彩半全场玩法说明 工商管理排名大学排名 四人麻将安卓版下载安装 ds真人游戏 网上彩票平台犯法 恒指期货交易技巧 一局一元钱的现金麻将 新疆25选7中多饯 快乐扑克任二技巧 湖南幸运赛车开奖视频