① Web前端設計,舉例說明頁面常用的布局形式,具體要求及回答案例如圖
摘要 你好:例如:http://www.aufe.e.cn/
② UI界面設計需要遵循哪些規范
交互和UI(界面)是兩個體系。界面設計師本身是不需要代碼的,但是很多公司為了節省人力成本要求設計師這么做,設計界面的時候每個icon、列表間距之類的都是設計師標注的,一般都有設計規范,移動端的根據安卓和ios系統來適配,web端根據各公司自己的柵格來。交互設計師的體系很復雜,他需要大量的時間來研究需求、分析競品以及勾畫框架和原型,在大公司里和團隊成員多向溝通,小公司一般是由PM(產品經理)兼任的。
如果你想學設計,最好先考慮清楚自己要學交互設計,還是UI(界面設計),這兩個不是單純的包含與被包含的關系,而是分屬兩個不同專業,就目前來看,北京一帶UI指的是界面設計,上海珠三角一帶指的是交互設計,而UE用戶體驗設計偏向交互多些,地域不同劃分也很亂,所以我不太清楚你所說的UI指的是什麼,不過設計師需要標注規范,這個是肯定的。
③ 如何建立一套 UI 設計規范
學習,先把UI設計的知識都學會,在自己大腦中興城一種自己的知識架構,然後就ok了
下面給你提供AAA教育的UI設計
第一階段 :UI設計基礎課程
初識UI: UI設計師的角色定義和價值體現,UI的含義、UI設計師的含義
手繪造型: 學習設計基礎、字體、構圖、手繪等基礎技能,快速培養UI設計師的視覺敏銳度,和繪畫能力, 二維造型方法,二維簡約圖標繪制原理與技法,各種材質質感表現
三維造型方法(物體的體積、結構、透視與光影表現)
色彩原理: 色彩屬性、對比與調和、色彩的混色配置、設計色彩的表述體系,色彩的裝飾美感及色彩的表現方法
第二階段: 平面設計
設計軟體應用: Photoshop:以Photoshop軟體為工具,講解書籍封面設計、海報設計、廣告設計、影樓後期處理、包裝設計、噴繪設計、畫冊設計、DM設計等企業實際工作中的具體項目。
I llustrator:以矢量圖形繪制軟體Illustrator為工具,講解標志設計、字體設計、圖形設計、企業VI設計、卡通形象設計等企業實際工作中的具體項目。
字體專項設計: 字體的分類和種類、字體的認識、各種場合字體的應用、形象時尚字體設計、字體標志及在廣告設計中的實際應用
版式專項設計: 版式的概念、版式中的色彩應用、版式中的字體應用以及網頁、書籍、報紙、畫冊、DM、海報等中的應用。
平面項目設計: 結合軟體、色彩、字體及版式的學習,針對宣傳單、折頁、名片、海報及VI做專題設計,提升綜合應用能力及平面UI設計能力。
第三階段: 網頁UI界面設計
WUI設計基礎: 頁面設計基本流程與設計規范的概念性講解,重點了解WEB界面設計規范;網頁配色技巧、色彩與構圖的概念及技巧;網頁導航與字版式設計
網頁設計軟體應用:Fireworks:軟體的基本構成、矢量工具和點陣圖工具、WUI用戶界面及廣告設計。
Dreamweaver:建立站點、添加頁面元素、使用CSS樣式及交互行為。
Flash :動畫製做原理與技巧,典型WUI商業廣告中的Flash技術與實現。
網頁設計要素: 學習web網站設計基本要素,網站圖標、按鈕、廣告banner、專題頁設計等元素的具體設計方法
Web標准化布局: (X)HTML/HTML5語言:HTML語法與常用標簽的詳解,包括布局標簽,表格標簽,表單標簽等。
CSS/CSS3層疊樣式表: CSS語法與常用屬性的詳解,使用CSS對網站中各個模塊進行修飾美化。
WUI項目實戰設計: 以企業網站、電商網站及專題網頁做實戰項目設計,經過全流程設計,達到網頁界面設計要求
第四階段: 移動設備端UI設計
UE交互設計
1. 手機主題、界面與圖標設計;
2. 擬物化與扁平化設計;
3. 系統性學習蘋果IOS設計規范;
4. 系統性學習Android設計規范。
圖標設計: 圖標設計要素與技法,圖標設計中的色彩應用,圖標創意思想與方法,2D圖標設計方法,3D立體圖標設計方法,圖標在界面中的設計應用,
移動UI界面設計:手機APP的用戶使用場景,手機界面的布局與結構,手機界面中的視覺語言與控制項詳解,手機交互中的手勢操作,APP產品的核心設計:導引設計,手機APP的色彩與情感化設計,手機APP整體視覺情感的提煉與傳達,移動APP項目設計 iphone端APP實際項目實戰
APP產品的需求分析—用戶研究—原型
Android端APP實際項目實戰
ipad端APP實際項目實戰
④ web app 的設計規范和標准有哪些
WEB標准設計 :
網頁結構 HTML XHTML XML DIV+CSS XHTML+CSS 表現層
網頁表現 (Cascading Style Sheets) 樣式表 頁麵皮膚
網頁行為 ECMAScript DOM BOM
用戶體驗 (User Experience)
搜索引擎優化 (Search Engine Optimization)
App的標准
IOS:界面尺寸、圖標尺寸、字體、顏色值
內部設計:1、所有能點擊的圖片不得小於44px(Retina需要88px)
2、單獨存在的部件必須是雙數尺寸
3、兩倍圖以@2x作為命名後綴
4、充分考慮每個控制按鈕在4中狀態下的樣式,如圖
Aos:界面尺寸、圖表尺寸、字體、顏色值
希望可以幫助你,望採納,謝謝啦~~~~~~
⑤ 網頁設計合適的頁面尺寸是多少
網頁設計選用的解析度是72像素,使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計,一般採用全屏展示和兩側留白的方式。
全屏展示,是整個網站看起來大氣一些,但是布局要合理安排,不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸,能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域,內容限時區域在好控制在1000px-1200px。
⑥ 公司後台管理web界面設計尺寸是多少
這個一般用百分比來設計,頭部固定高度,左側固定寬度,右側用100%-左側寬度,以達到最佳瀏覽效果
一般後台管理都會有表格編排問題,會涉及到很多參數,用百分比可以根據表格屬性自動伸縮,而且不影響美觀性
望採納
⑦ Web 頁面採用多大的寬度最合適
網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計.
網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展.但目前也有為數不少的15寸顯示器.另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Friefox等.
高度:
高度是可以向下延展的,所以一般對高度不限制. 對於一屏來說,一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件佔了半個屏幕,所以高度沒有確切值。
寬度:
1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。
2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005
3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001
註:Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。
所以如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點.也方便做一些浮動層的設計.
如果是800的解析度一般都設成770。但也有設成760的.
這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右.
網頁設計標准尺寸:
1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。
3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右
4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.
頁面標准按800*600解析度製作,實際尺寸為778*434px
頁面長度原則上不超過3屏,寬度不超過1屏
每個標准頁面為A4幅面大小,即8.5X11英寸
全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px
另外120*90,120*60也是小圖標的標准尺寸
每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K
標准網頁廣告尺寸規格
一、120*120,這種廣告規格適用於產品或新聞照片展示。
二、120*60,這種廣告規格主要用於做LOGO使用。
三、120*90,主要應用於產品演示或大型LOGO。
四、125*125,這種規格適於表現照片效果的圖像廣告。
五、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。
六、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。
七、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。
八、88*31,主要用於網頁鏈接,或網站小型LOGO。
廣告形式 像素大小 最大尺寸 備注
BUTTON 120*60(必須用gif) 7K
215*50(必須用gif) 7K
通欄 760*100 25K 靜態圖片或減少運動效果
430*50 15K
超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果
巨幅廣告 336*280 35K
585*120
豎邊廣告 130*300 25K
全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式
圖文混排 各頻道不同 15K
彈出窗口 400*300(盡量用gif) 40K
BANNER 468*60(盡量用gif) 18K
懸停按鈕 80*80(必須用gif) 7K
流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀)
網頁中的廣告尺寸
1.首頁右上,尺寸120*60
2.首頁頂部通欄,尺寸468*60
3.首頁頂部通欄,尺寸760*60
4.首頁中部通欄,尺寸580*60
5.內頁頂部通欄,尺寸468*60
6.內頁頂部通欄,尺寸760*60
7.內頁左上,尺寸150*60或300*300
8.下載地址頁面,尺寸560*60或468*60
9.內頁底部通欄,尺寸760*60
10.左漂浮,尺寸80*80或100*100
11.右漂浮,尺寸80*80或100*10
⑧ web界面設計規范有哪些
一、網頁尺寸
製作網頁時,我們選用的解析度是72像素/英寸,使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種,左右型布局和居中型布局。布局的不一致,使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是:可辨識性和易讀性。
網頁的文字設計是系統默認的字體:宋體、微軟黑體、蘋果系統黑體,英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種:
12px是應用於網頁的最小字體,適用於非突出性的日期,版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。
⑨ 什麼是web前端開發標准
對於前端,官方的定義是網站前台部分,運行在PC端,移動端等瀏覽器上展現給用戶瀏覽的網頁。用自己的話來說,前端是網頁給訪問網站的人看的內容和頁面,那前端開發顧名思義就是這些內容和頁面中代碼的實現。
現在的前端開發使得現代網頁更加美觀,交互效果顯著,功能更加強大。所以現在的前端開發,運用到的知識面更加廣泛,難度也更大。前端開發目前市場需求還是很大的,而且相對來講比較容易,很適合學習。需要學習的內容也不少,我有全套web前端視頻課資料可以發給你自學。
學習內容包括:
①計算機基礎以及PS基礎
②前端開發基礎(HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架)
③移動開發
④前端高級開發(ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等)
⑤小程序開發
⑥全棧開發(MySQL資料庫、Python編程語言、Django框架等)
⑦就業拓展(網站SEO與前端安全技術)
互聯網行業目前還是最熱門的行業之一,學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的,發展前景非常好,普通人也可以學習。
想要系統學習,你可以考察對比一下開設有相關專業的熱門學校,好的學校擁有根據當下企業需求自主研發課程的能力,能夠在校期間取得大專或本科學歷,中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的,建議實地考察對比一下。
祝你學有所成,望採納。
⑩ UI設計網頁時,導航欄尺寸規格一般是多少
當前最流行的解析度是1920*1080,在該解析度下,頁面中心區域為1200px以內都可以。在800*600解析度下,導航欄尺寸規格保持在778px以內;在1024*768解析度下,網頁寬度保持在1002px以內。
如果沒有指定的要求,以1920尺寸設計就好(這是目前最普遍的尺寸大小),前端開發人員會自行適配其他的解析度。
(10)web界面設計規范擴展閱讀:
UI設計網頁方法
一、呈現更新穎的內容
設計師在進行網頁ui設計的過程中需要注意的是,想要讓自己的網頁看起來更加與眾不同,但也不必過於誇大,可以用一些新鮮的理念和不同的布局來吸引用戶訪問。比如以一種動態的方式,將信息呈現給用戶,以此來贏得用戶更多的關注。
二、增強元素的設計感
相對於普通的網頁ui設計而言,具有較強的設計感的網頁往往會更容易吸引用戶的注意。任何一個具有創意的網站開發設計方案,都會把目光更聚焦在網頁的基本布局和色彩搭配上,而這也意味著網頁上一般存在很多種不同的元素。
三、激勵用戶更多操作
網站開發的設計製作的類型有很多種,面對不同的類型,要有特定的網頁ui設計方案。給用戶提供一個尋找目標的簡易方法,這樣用戶就容易沉浸到頁面中來,同時也增加了用戶操作的幾率。