導航:首頁 > 萬維百科 > 網頁ui設計規范

網頁ui設計規范

發布時間:2020-08-03 08:40:09

1、網站界面設計規范有哪些?

易用性規范

2.001 常用按鈕要支持快捷方式。

2.002 完成同一功能或任務的元素放在集中位置,減少滑鼠移動的距離。

2.003 界面要支持鍵盤自動瀏覽按鈕功能,即按Tab鍵的自動切換功能。

2.004 界面上首先應輸入的和重要信息的控制項在Tab順序中應當靠前,位置也應放在窗口上較醒目的位置。

2.005 分頁界面要支持在頁面間的快捷切換,常用組合快捷鍵Ctrl+Tab

2.006 默認按鈕要支持Enter和選操作,即按Enter後自動執行默認按鈕對應操作。

2.007 可寫控制項檢測到非法輸入後應給出說明並能自動獲得焦點。

2.008 Tab鍵的順序與控制項排列順序要一致,目前流行總體從上到下,同時行間從左到右的方式。

2.009 復選框和選項框,按選擇幾率的高底而先後排列。

2.010 復選框和選項框要有默認選項,並支持Tab選擇。

2.011 界面空間較小時使用下拉框而不用選項框。

2.012 選項數較少時使用選項框,相反使用下拉列表框。

2.013 根據用戶不同採用相應的詞語語氣語調,如專用軟體,可以出現很多專業詞彙;用戶為兒童:這可以語氣親切和藹;老年用戶則應該成熟穩重。

2.014 滑鼠為不可點擊狀態時顯示箭頭,可點擊狀態顯示手型;系統忙時顯示沙漏形狀
規范性規范

2.015 菜單前的圖標能直觀的代表要完成的操作。

2.016 工具欄要求可以根據用戶的要求自己選擇定製。

2.017 系統常用的工具欄設置默認放置位置。

2.018 工具箱要具有可增減性,由用戶自己根據需求定製。

2.019 狀態條要能顯示用戶切實需要的信息,常用的有、目前的操作、系統狀態、用戶位置、用戶信息、提示信息、錯誤信息等,如果某一操作需要的時間較長,還應該顯示進度條和進程提示。

2.020 滾動條的長度要根據顯示信息的長度或寬度能及時變換,以利於用戶了解顯示信息的位置和百分比。

2.021 狀態條的高度以放置五號字為宜,滾動條的寬度比狀態條的略窄。

2.022 菜單和工具條要有清楚的界限;菜單要求凸出顯示,這樣在移走工具條時仍有立體感。

2.023 工具條一般比菜單要寬,但不要寬的太多,否則看起來很不協調。

幫助規范

2.024 幫助文檔中的性能介紹與說明要與系統性能配套一致。

2.025 打包新系統時,對作了修改的地方在幫助文檔中要做相應的修改。

2.026 在界面上調用幫助時應該能夠及時定位到與該操作相對的幫助位置。也就是說幫助要有即時針對性。

2.027 用戶可以用關鍵詞在幫助索引中搜索所要的幫助,當然也應該提供幫助主題詞。

2.028 如果沒有提供書面的幫助文檔的話,最好有列印幫助的功能。

2.029 在幫助中應該提供我們的技術支持方式,一旦用戶難以自己解決可以方便的尋求新的幫助方式。

合理性規范

2.030 與正在進行的操作無關的按鈕應該加以屏蔽(Windows中用灰色顯示,沒法使用該按鈕)。

2.031 對可能造成數據無法恢復的操作必須提供確認信息,給用戶放棄選擇的機會。

2.032 非法的輸入或操作應有足夠的提示說明。

2.033 對運行過程中出現問題而引起錯誤的地方要有提示,讓用戶明白錯誤出處,避免形成無限期的等待。

2.034 提示、警告、或錯誤說明應該清楚、明了、恰當。

2.035 提交失敗後必須保存用戶已經輸入的內容,以便修改後再次提交。

美觀與協調規范

2.036 長寬接近黃金點比例,切忌長寬比例失調、或寬度超過長度。

2.037 布局要合理,不宜過於密集,也不能過於空曠,合理的利用空間。

2.038 按鈕大小基本相近,忌用太長的名稱,免得佔用過多的界面位置。

2.039 按鈕的大小要與界面的大小和空間要協調。

2.040 避免空曠的界面上放置很大的按鈕。

2.041 放置完控制項後界面不應有很大的空缺位置。

2.042 字體的大小要與界面的大小比例協調。

2.043 前景與背景色搭配合理協調,反差不宜太大,最好少用深色,如大紅、大綠等。如:安全軟體,根據工業標准,可以選取黃色,綠色體現環保,藍色表現時尚、紫色表現浪漫等等,淡色可以使人舒適,暗色做背景使人不覺得累等。

2.044 如果使用其他顏色,主色要柔和,具有親和力與磁力,堅決杜絕刺目的顏色。

2.045 界面風格要保持一致,字的大小、顏色、字體要相同,除非是需要藝術處理或有特殊要求的地方。

2.046 如果能給用戶提供自定義界面風格則更好,由用戶自己選擇顏色、字體等。

2.047 色盲、色弱用戶,即使使用了特殊顏色表示重點或者特別的東西,也應該使用特殊指示符。

2.048 顏色方案也需要測試,常常由於顯示器、顯卡的問題,色彩表現每台機器都不一樣,應該經過嚴格測試,不同機器進行顏色測試。

2.049 使用統一的語言描述,例如一個關閉功能按鈕,可以描述為退出、返回、關閉,則應該統一規定。

菜單設計規范

2.050 菜單通常採用"常用--主要--次要--工具--幫助"的位置排列,符合流行的Windows風格。

2.051 常用的有"文件"、"編輯","查看"等,幾乎每個系統都有這些選項,當然要根據不同的系統有所取捨。

2.052 下拉菜單要根據菜單選項的含義進行分組,並按照一定的規則進行排列,用橫線隔開。

2.053 一組菜單的使用有先後要求或有向導作用時,應該按先後次序排列。

2.054 沒有順序要求的菜單項按使用頻率和重要性排列,常用的放在開頭,不常用的靠後放置;重要的放在開頭,次要的放在後邊。

2.055 如果菜單選項較多,應該採用加長菜單的長度而減少深度的原則排列。

2.056 菜單深度一般要求最多控制在三層以內。

2.057 對與進行的操作無關的菜單要用屏蔽的方式加以處理,如果採用動態載入方式——即只有需要的菜單才顯示——最好。

2.058 菜單前的圖標不宜太大,與字高保持一直最好。

2.059 主菜單的寬度要接近,字數不應多於四個,每個菜單的字數能相同最好。

2.060 主菜單數目不應太多,最好為單排布置。

獨特性規范

2.061 安裝界面上應有單位介紹或產品介紹,並有自己的圖標。

2.062 主界面,最好是大多數界面上要有公司圖標。

2.063 登錄界面上要有本產品的標志,同時包含公司圖標。

2.064 幫助菜單的"關於"中應有版權和產品信息。

2.065 公司的系列產品要保持一直的界面風格,如背景色、字體、菜單排列方式、圖標、安裝過程、按鈕用語等應該大體一致。

安全性規范

2.066 應當注意盡可能避免用戶無意錄入無效的數據。

2.067 採用相關控制項限制用戶輸入值的種類。

2.068 當用戶作出選擇的可能性只有兩個時,可以採用單選框。

2.069 當選擇的可能再多一些時,可以採用復選框,每一種選擇都是有效的,用戶不可能輸入任何一種無效的選擇。

2.070 當選項特別多時,可以採用列表框,下拉式列表框。

2.071 在一個應用系統中,開發者應當避免用戶作出未經授權或沒有意義的操作。

2.072 對可能引起致命錯誤或系統出錯的輸入字元或動作要加限制或屏蔽。

2.073 對可能發生嚴重後果的操作要有補救措施。通過補救措施用戶可以回到原來的正確狀態。

2.074 對一些特殊符號的輸入、與系統使用的符號相沖突的字元等進行判斷並阻止用戶輸入該字元。

2.075 對錯誤操作最好支持可逆性處理,如取消系列操作。

2.076 在輸入有效性字元之前應該阻止用戶進行只有輸入之後才可進行的操作。

2.077 對可能造成等待時間較長的操作應該提供取消功能。

2.078 特殊字元常有;;'"><,`'、"["{、\|}]+=)-(_*&&^%$ #@!~,.。?/還有空格。

2. 079 與系統採用的保留字元沖突的要加以限制。

2.080 讀入用戶所輸入的信息時,根據需要選擇是否去掉前後空格。

2.081 有些讀入資料庫的欄位不支持中間有空格,但用戶切實需要輸入中間空格,這時要在程序中加以處理。

輸入項規范

2.082 必輸項中不可為空,不可輸入空格

2.083 必輸項給出必輸項標識(*)。

2.084 非必輸項欄位,Null插入資料庫時不會出錯,在資料庫中設置默認值

2.085 日期顯示格式一致;或提供固定格式的選擇。

2.086 輸入區域輸入特殊字元,插入資料庫時不出錯或提示不允許輸入特殊字元。

2.087 英文輸入不區分大小寫,不可輸入漢字、數字及特殊字元

2.088 數值欄位只能輸入+ ,— ,0~9及功能鍵(BackSpace 游標) 。數值不能為負數。

2.089 單行文本框/多行文本框;長度合適,可以容納相應文字,但不能超過資料庫該欄位長度,最好將可以輸入的最大字元數標在旁邊。建議單行文本框中當輸入的字元超過一定長度時再輸入無效;對於多行文本框給出最大字元數標識

2.090 附件;可正常添加符合格式的附件; 附件可正常打開和保存,附件名較長時可正常操作;直接輸入錯誤的附件地址,保存時應給出提示信息;附件打開和保存到本地時,文件名要顯示原文件的文件名。

2.091 密碼輸入;在需求中定義密碼是否允許為空或空格;密碼是否允許特殊字元;是否區分大小寫,密碼的可輸入長度;程序中應給出文字說明密碼的可輸入長度。

2、UI設計的規范標准有哪些

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

在飛速發展的電子產品中,界面設計工作一點點的被重視起來,做界面設計的「美工」也隨之被稱之為「UI設計師」或「UI工程師」,其實軟體界面設計就像工業產品中的工業造型設計一樣,是產品的重要賣點,一個產品擁有美觀的界面會給人帶來舒適的視覺享受,拉近人與商品的距離,是建立在科學性之上的藝術設計,那麼,UI設計的規范標准有哪些呢?

一、軸

軸在UI設計中是最基本、最常見的概念,也是用來組織界面結構的重要核心。

簡單說來,軸是在設計的時候組織一系列元素的假象線,在下面的設計圖中,軸以虛線的方式被標注出來。

1、對齊

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

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

2、強化

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

最好的例子是城市中的路燈構成了道路兩旁建築物之間的軸,如果一邊有建築一邊沒有,那麼這種軸線的感覺不會那麼強烈。

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

3、運動

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

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

4、連續性

如果終點是不確定的,那麼你通常會沿著軸線的方向瀏覽/運動,直到你找到感興趣的東西,或者感到厭倦並關閉應用。

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

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

二、對稱

當元素被均勻地放置在軸線的兩側之時,他們構成了對稱的關系。當元素被精準地在軸線兩側一一對應之時,它們就形成了完美對稱。

1、平衡

對稱令整個設計更加平衡,當元素與控制項在軸線兩側處於相同位置之時,會給人以協調和諧的設計感。

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

Rdio的APP設計就遵循著這樣的設計規則,屏幕兩側的控制項是相同的規格,這類布局很適宜閱讀,用戶會自覺地自上到下,從左向右查看。

2、不對稱

如果軸線兩側的控制項布置不再是一一對應尺寸相近,那就是不對稱的設計,不對稱的設計會給人明顯的失衡感,可能會令人不舒服,但是也能造就殘缺美,當然這要看你具體怎麼做。

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

三、層級

當某個元素出現在比其他元素更重要的位置的時候,層級就出現了。

1、尺寸

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

通過尺寸來區分文章列表層級的典型就是稍後讀應用Pocket,頂部的輪播文章擁有更大的圖片,它的位置和尺寸會令我們一眼注意到(具體可查看馬海祥博客《詳解移動端設備頁面尺寸設計原理》的相關介紹)。

2、形狀

如果一個控制項在形狀和形態上同其他的不一樣,也可以讓它獨立出一個層級,不規則的設計同樣會令人側目,建築物的正面擁有五個相同的窗戶和一閃大門,你會立刻注意到門的獨特之處。

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

3、位置

位置的存在同樣能彰顯層級的不一樣,在圓圈之內,中心位置的東西比邊緣部分的看起來更重要,位於軸線頂端的控制項會顯得比其他部分的優先順序更高。

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

四、韻律

UI設計和建築設計同樣有著韻律之美,重復的模式會營造出獨特的節奏之美。

1、模式

理解韻律最直接的方式就是聽歌,音樂擁有節奏感,絕大多數的音樂遵循著相同的節拍,節拍就是音樂模式的一部分。

這方面最典型的APP是Airbnb,APP列表中每一間房子都占據一個模塊,模塊中有著大小相同的圖片,價格、位置和房東信息和圖片的相對位置一定,且排版勻稱舒服,兩個模塊之間的間距也相同,當你瀏覽的時候,熟悉的節奏會讓你清楚地知道上哪看關鍵信息。

2、間斷

當節奏被間隔打斷的時候,會形成不同的層級,聽歌的時候,均勻的節奏被其他的音樂元素打斷的時候,你會意識到這是比較特別的部分。

在Twitter的APP中,推文和推文保持著相同的樣式,均勻的節奏,但是其中的「推薦用戶」一項有著不同的樣式,它插入到推文列表中,打破了整個信息流的節奏,凸顯出不同的層級,會很快抓住你的注意力。

3、網頁設計合適的頁面尺寸是多少

網頁設計選用的解析度是72像素,使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計,一般採用全屏展示和兩側留白的方式。
全屏展示,是整個網站看起來大氣一些,但是布局要合理安排,不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸,能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域,內容限時區域在好控制在1000px-1200px。

4、UI設計規范都有哪些

UI 設計規范包含顏色、文本樣式、圖層樣式、圖標、組件、品牌等規范,團隊沒有設計規范的話,建議在藍湖搭建。

5、PC端UI設計尺寸規范?

<

6、UI設計的規范

快速標注尺寸和PS切圖

快速換算單位

快速繪制不同需求參考線

多個矢量圖形圓角轉換

水平、垂直或按指定間隔復制圖層

可以使用藍湖

7、PC客戶端UI設計有哪些規范

1、簡易性

界面的簡潔是要讓用戶便於使用、便於了解產品,並能減少用戶發生錯誤選擇的可能性。

2、用戶語言

界面中要使用能反映用戶本身的語言,而不是游戲設計者的語言。

3、記憶負擔最小化

人腦不是電腦,在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩定,24小時內存在約25%的遺忘率。所以對用戶來說,瀏覽信息要比記憶更容易。

4、一致性

它是每一個優秀界面都具備的特點。界面的結構必須清晰且一致,風格必須與產品內容相一致。軟體中往往存在多個組成部分(組件、元素)。不同組成部分之間的交互設計目標需要一致。交互元素的外觀往往影響用戶的交互效果。同一個(類)軟體採用一致風格的外觀,對於保持用戶焦點,改進交互效果有很大幫助。

5、清楚

在視覺效果上便於理解和使用。軟體要為用戶使用,用戶必須可以理解軟體各元素對應的功能。如果不能為用戶理解,那麼需要提供一種非破壞性的途徑,使得用戶可以通過對該元素的操作,理解其對應的功能。

6、用戶的熟悉程度

用戶可通過已掌握的知識來使用界面,但不應超出一般常識。

7、從用戶習慣考慮

想用戶所想,做用戶所做。用戶總是按照他們自己的方法理解和使用。

通過比較兩個不同世界(真實與虛擬)的事物,完成更好的設計。如:書籍對比竹簡。

8、排列

一個有序的界面能讓用戶輕松的使用。軟體的交互流程,用戶可以控制。功能的執行流程,用戶可以控制。

9、安全性

用戶能自由的作出選擇,且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。

10、靈活性

簡單來說就是要讓用戶方便的使用,但不同於上述。即互動多重性,不局限於單一的工具(包括滑鼠、鍵盤或手柄、界面)。

11、人性化

高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統,即用戶可依據自己的習慣定製界面,並能保存設置。

8、web界面設計規范有哪些

一、網頁尺寸
製作網頁時,我們選用的解析度是72像素/英寸,使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種,左右型布局和居中型布局。布局的不一致,使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是:可辨識性和易讀性。
網頁的文字設計是系統默認的字體:宋體、微軟黑體、蘋果系統黑體,英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種:
12px是應用於網頁的最小字體,適用於非突出性的日期,版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。

9、UI設計網頁設計字體規范應該要注意什麼

可以參考常規字體的使用規范:

1、在每個項目設計中只使用1-2個字體樣式,而在品牌字有明確的規范的情況下,只需要一種字體貫穿全文,通過對字體放大來強調重點文案。字體用的太多,越顯得不夠專業。

2、不同的樣式的字體,形狀或系列最好相同,保證字體風格的一致性。

3、字體與背景的層次要分明,確保字體樣式與色調氣氛相匹配,等。

(9)網頁ui設計規范擴展資料:

網頁設計

1、需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析,從而建立起營銷模型。

2、以業務目標為中心進行功能策劃,製作出欄目結構關系圖。

3、以滿足用戶體驗設計為目標,使用axure rp或同類軟體進行頁面策劃,製作出交互用例。

4、以頁面精美化設計為目標,使用PS、AI等軟體,調整,使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。

5、根據用戶反饋,進行頁面設計調整,以達到最優效果。

10、UI設計師必須掌握的設計規范有哪些

第一:UI用戶設計基礎(UI行業發展及UI設計師職業規劃,美術基礎,平面設計基礎,圖形與創意設計,網頁設計基礎,互動式網站),軟體:Photoshop、Illustrator
第二:移動界面設計(圖標創意思路與方法,圖標的創作設計,主題圖標設計,Ios系統Android系統Windows phone系統,UI設計)
第三:交互類(UCD,交互設計高級技術)
第四階段 流程設計(界面開發對接,流程管理,移動媒體綜合開發)
也很簡單,知道蘋果安卓手機的尺寸,圖標設計尺寸,熟悉AI和PS軟體,顏色搭配非常重要,會ae sxure,最好是會一些代碼這樣會對你有更多的幫助。最重要的就是 審美 。

與網頁ui設計規范相關的知識