當前位置:首頁 » 網頁前端 » web端ui規范示例
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web端ui規范示例

發布時間: 2023-06-30 03:26:26

1. Web和Ui設計尺寸規范有哪些

WEB端

必備元素:logo、培並做menu(導航)、banner(動效【flash、H5】)、內容區(新聞、企業簡介、產品展示...)、版權信息(版權所有、聯系方式)

可選元素:搜索、電話、在線客服、流量統計...

用戶體驗習慣:左:瀏覽區域、列表區域

右:功能區域、內容區域

字體:最小12px,最黑#333333

字體12px、14px、16px效果選擇無,其他字型大小則用銳利配衡、犀利、渾厚等

標題部分字體:14px~24px(盡可能採用雅黑)

正文部分字體:12px、14px(雅黑或者宋體),字行距一般為1.5~2倍之間。

尺寸規范:在解析度1024px*768px的情況下,滿屏寬度為1003px,通常定義可視范圍為920px~1000px之間。常見:寬960px、980px、1000px,一屏高度650px。

UI方面

iOS

iphone字體、字蔽團號標准

字體:中文:蘋方;英文:舊金山

字型大小:正文最小24px;常駐欄icon20px

Andriod

字體:中文:思源黑體;英文:roboto

字型大小:注釋最小:24px;文本:28px;文章標題或圖標名稱:32px;導航標題:36px(在這里為720px*1280px的尺寸下設計規范,註:1sp=2px)

界面尺寸

圖標尺寸

以上內容希望可以幫到你!

2. 什麼是基於web的UI設計做web的UI設計需要掌握什麼技術

web是網路,UI是界面設計。
基於web的UI設計就是基於網路的用戶界面體驗設計。
比如我現在回答問題的這個網頁界面,打字的區域是文字輸入框,框上是問題,框是直角而非倒角設計,而同問、匿名和提交回答,還有右側的 簽到,幫助更多人按鈕都是有倒角的。。。。
總之你上網看到的一個界面 就是一個界面設計。但想我上面說的這個界面,就是很爛的界面,連按鈕都不同意,你看搜索答案,我要提問和我要回答按鈕又是直角按鈕。。。

需要的技術:
1、設計能力.
2、理解與溝通能力,設計心理學。
3、軟體使用技巧。

你可以看一些UI比較好的網站,比如BING的搜索頁面。不像網路只知道抄襲某已經離開的大哥,二十另闢蹊徑。。。

3. 使用jQuery UI庫開發Web界面的簡單入門指引

一.jQuery
UI
jQuery
UI
是以jQuery
為基礎的開源JavaScript
網頁用戶界面代碼庫。包
含底層用戶交互、動畫、特效和可更換主題的可視控制項。我們可以直接用它來構建具有很
好交互性的web
應用程序。
jQuery
UI
的官網網站為:http://jqueryui.com/
jquery-ui-x.xx.x.custom.zip
。裡面目錄結構如下:
1.css,包含與jQuery
UI
相關的CSS
文件;
2.js,包含jQuery
UI
相關的JavaScript
文件;
3.Development-bundle,包含多個不同的子目錄:demos(jQuery
UI
示例文件)、docs(jQuery
UI
的文檔文件)、themes(CSS
主題文件)和ui(jQuery
ui
的JavaScript
文件)。
4.Index.html,可以查看jQuery
UI
功能的索引頁。
二.CSS
主題
CSS
主題就是jQuery
UI
的皮膚,有各種色調的模版提供使用。對於程序員,可以使用
最和網站符合的模版;對於美工,也提供了沒有任何樣式的模版基於設計。
可以在這里:http://jqueryui.com/themeroller/
查看已有模版樣式。
三.
簡單引入
由於jQuery
UI
不同組件的引入都有類似的特點和語法,所以這里只介紹兩種組件
的引入方式,這樣可以以此類推其他組件的引入方式。
button
按鈕
//將button
按鈕設置成UI
$('#button').button();
dialog
對話框
//將div
設置成dialog
對話框
$('#dialog
').click(function
()
{
$("#dialog
").dialog();
});
這樣的形式,可以得知,jQuery
UI的引入都是這樣的
組件名()
方法的形式引入。