網頁按鈕設計規范

1、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：界面尺寸、圖表尺寸、字體、顏色值

希望可以幫助你，望採納，謝謝啦~~~~~~

2、網站首頁設計有何要求

一、網站首頁的必要元素 雖然首頁元素根據企業性質的不同會做改變，但是基本的頁面元素必須要具備。如：導航欄、LOGO、Banner、按鈕、圖片、文字。 1、導航欄 導航欄如果設計得恰到好處，是會給網頁本身增色很多(千萬不要太花哨，它屬於功能物件，喧賓奪主就不好了)。導航欄有一排、兩排、多排、圖片導航和Frame 框架快捷導航(民主湖論壇就是這種)等等各種情況的設計。有時候是橫排，有時候則是豎排。另外還有一些動態的導航欄，如很精彩的Flash導航。 2、LOGO LOGO是網站為了給大家一個比較直觀的信息的表達工具。網站的LOGO，一般以靜態的居多，也有動態的，但是LOGO的特點都是在表達網站的信息，是一個網站的直接的表現窗口。 3、Banner 是網站的廣告展示，對於引起用戶注意和記憶、增強畫面效果有重要作用。 4、按鈕 網頁中的「用戶登錄」、「登錄按鈕」「More按鈕」、「個股推薦」等等類似物件，通常都統稱為按鈕。它是引導用戶進入其他頁面的一個重要埠。

二、網站首頁的整體規劃 對網站首頁設計的整體要求體現在： 1.有共性，才有統一，有細節區別，就有層次。 2.防止設計與實現過程中的偏差，不要定死具體要放多少條信息。 3.設計的各部分，要配合整體風格，誇張一點好像VI。 4.不僅頁面上各項設計要統一，而且網站的各級別頁面也要統一。 5.頁面要「透氣」，就是信息不要太過集中，以免文字編排太緊密。 6.不要有太多分散注意力的點。動態閃爍要適中。 7.頁面留白部分，要根據平面設計原理來設計，請注意，分欄式結構不宜留白。 8.還要考慮到瀏覽器上部佔用的屏幕空間，防止圖片截斷等造成視覺效果不好。 9.首頁設計圖片+導航，這是一種比較強的網站表達，可以根據時間的變化更改圖片，一般用在專題網站上，如民主湖電台，還有很多公司的網頁。

三、對網站首頁功能易用性的要求 任何網站都要把這個問題放在第一位。不過大家請注意以下幾點： 1.導航欄應最先調入，以便常客快速前往所需信息空間。 2.頁面長度要短，使得用戶在信息空間內可迅速移動。 3.導航設計方向要一致。支持導航的層次按鈕應當從上到下或從左到右，但不要兩者都用，不要混用方向。

四、網站首頁設計要求體現出氣氛情感表達 氣氛會自然地激發出一種情感，不管它來自圖片、顏色、標題或者是動態的廣告，只要是來自頁面，本身就具備了一種表達思想。氣氛的表達是一個網站的靈魂所在，在瀏覽網頁的是時候給人的第一感覺是最重要的，氣氛情感也代表著整個網站的主題，是瀏覽者最容易所到感染的隱藏因素。

3、簡要說明編輯設計網頁要遵循哪些標准和規范

一：確定網站主題

做網站，首先必須要解決的就是網站內容問題，即確定網站的主題。美國《個人電腦》雜志(PC Magazine)評出了99年度排名前100位的全美知名網站的十類題材：第1類：網上求職；第2類：網上聊天/即時信息/ICQ；第3類：網上社區/討論/郵件列表；第4類：計算機技術；第5類：網頁/網站開發；第6類：娛樂網站；第7類：旅行；第8類：參考/資訊；第9類：家庭/教育；第10類：生活/時尚。我們可以參看上面的分類，繼續細分。如果自己在某些方面有興趣，或掌握的資料較多，也可以做一個自己感興趣的東西，一者，你可以有自己的見解，做出自己的特色；二者，在製作網站時不會覺得無聊或者力不從心。興趣是製作網站的動力，沒有創作熱情，很難設計製作出優秀的作品。

對於內容主題的選擇，要做到小而精，主題定位要小，內容要精。不要去試圖製作一個包羅萬象的站點，這往往會失去網站的特色，也會帶來高強度的勞動，給網站的及時更新帶來困難。記住：在互聯網上只有第一，沒有第二！

要領二：選擇好域名

域名是網站在互聯網上的名字。一個非產品推銷的純信息服務網站，其所有建設的價值，都凝結在其網站域名之上。失去這個域名，所有前期工作就將全部落空。

目前，做個人網站的很多都依賴免費個人空間，其域名也是依賴免費域名指向，如網易的虛擬域名服務，其實這對個人網站的推廣與發展很為不利，不光是它「適時」開啟的窗口妨礙了瀏覽者的視線和好感，讓人一看就知道是個人網站，而且也妨礙了網頁的傳輸速度。所以，就我個人觀點來說，首先花點錢去注冊一個域名，獨立的域名就是個人網站的第一筆財富，要把域名起得形象、簡單、易記。

要領三：掌握建網工具

網路技術的發展帶動了軟體業的發展，所以用於製作Web頁面的工具軟體也越來越豐富。從最基本的HTML編輯器到現在非常流行的Flash互動網頁製作工具，各種各樣的Web頁面製作工具，下面是幾款具有代表性的網頁製作器：

（1）HTML編輯器。雖然HTML代碼復雜，編輯和調試要花費大量的時間，但因HTML的穩定性、廣泛支持性及可創建復雜的頁面效果，仍受高級網頁製作人員的青睞。就目前來說，有眾多的編輯器供選擇，這些編輯器廣泛支持復雜頁面創建及高級HTML規范，使用較為普遍的有Hotdog等專業HTML編輯器。

（2）所見即所得的網頁編輯器。其中以Microsoft Frontpage為代表，它具有如Word一樣的操作界面，熟知Word功能的操作者，只要稍加培訓就能輕松編制網頁。而且，Frontpage還能解析網頁的HTML源代碼，並提供了預覽支持。但Frontpage的一些特殊顯示功能並不能在其它非IE瀏覽器下實現。所以Frontpage是一款非常適合初、中級網頁製作人員使用的工具軟體。

（3）現在非常流行的 Macromedia公司出品的Flash互動網頁製作工具。這是是一款功能非常強大的互動式矢量多媒體網頁製作工具。能夠輕松輸出各種各樣的動畫網頁，它不需要特別繁雜的操作，也比JAVA小巧精悍！但它的動畫效果、互動效果、多媒體效果十分出色。而且還可以在Flash動畫中封裝Mp3音樂、填寫表單等；並且由於Flash編制的網頁文件比普通網頁文件要小得多，所以大大加快了瀏覽速度。這是一款十分適合動態Web製作的工具。

另外，個人網站製作者還需了解W3C的HTML4.0規范、CSS層疊樣式表的基本知識、javascript、VBScript的基本知識。對於常用的一些腳本程序如ASP、CGI、PHP也要有適當了解，還要熟練使用圖形處理工具和動畫製作工具以及矢量繪圖工具，並能部分了解多種圖形圖像動畫工具的基本用法，熟練使用FTP工具以及擁有相應的軟硬體和網路知識也是必備的。

當然，互聯網還是一個免費的資料庫。編制網頁需要多種多樣的按鈕、背景還有各種各樣圖形、圖片。如果這些都要靠自己完成，既浪費時間又浪費金錢，而且還需要強大的圖形、圖片製作技術。所以，為了省卻這些麻煩，網站製作者完全可以從網上下載各種精美實用的圖片、按鈕、背景等網頁素材。

要領四：確定網站界面

界面就是網站給瀏覽者的第一印象，往往決定著網站的可看性，在確定網站的界面時要注意以下三點：

①欄目與板塊編排

構建一個網站就好比寫一篇論文，首先要列出題綱，才能主題明確、層次清晰。網站建設初學者，最容易犯的錯誤就是：確定題材後立刻開始製作，沒有進行合理規劃。從而導致網站結構不清晰，目錄龐雜混亂，板塊編排混亂等。結果不但瀏覽者看得糊里糊塗，製作者自己在擴充和維護網站也相當困難。所以，我們在動手製作網頁前，一定要考慮好欄目和板塊的編排問題。
網站的題材確定後，就要將收集到的資料內容作一個合理的編排。比如，將一些最吸引人的內容放在最突出的位置或者在版面分布上占優勢地位。欄目的實質是一個網站的大綱索引，索引應該將網站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。在欄目編排時需要注意的是：

●盡可能刪除那些與主題無關的欄目；

●盡可能將網站內最有價值的內容列在欄目上；

●盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢；輔助內容，如站點簡介、版權信息、個人信息等大可不必放在主欄目里，以免沖淡主題。

另外，板塊的編排設置也要合理安排與劃分。板塊比欄目的概念要大一些，每個板塊都有自己的欄目。舉個例子：ENET矽谷動力（www.enet.com.cn）的站點分新聞、產品、游戲、學院等板塊，每個板塊下面又各有自己的主欄目。一般來說，個人站點內容較少，只要分個欄目也就夠了，不需要設置板塊。如果有必要設置板塊的，應該注意：

●各板塊要有相對獨立性；

●各板塊要有相互關聯；

●各板塊的內容要圍繞站點主題；

②目錄結構與鏈接結構

網站的目錄是指建立網站時創建的目錄。例如：在用Frontpage建立網站時都默認建立了根目錄和Images子目錄。目錄的結構是一個容易忽略的問題，大多數站長都是未經規劃，隨意創建子目錄。目錄結構的好壞，對瀏覽者來說並沒有什麼太大的感覺，但是對於站點本身的維護，以後內容的擴充和移植有著重要的影響。所以建立目錄結構時也要仔細安排，比如：

●不要將所有文件都存放在根目錄下。有網站製作者為了方便，將所有文件都放在根目錄下。這樣就很容易造成：文件管理混亂，搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除，哪些是相關聯的文件，影響工作效率；上傳速度變慢，伺服器一般都會為根目錄建立一個文件索引，如果將所有文件都放在根目錄下，那麼即使只上傳更新一個文件，伺服器也需要將所有文件再檢索一遍，建立新的索引文件，很明顯，文件量越大，等待的時間也將越長。

●按欄目內容建立子目錄。子目錄的建立，首先按主欄目建立。友情連接內容較多，需要經常更新的可以建立獨立的子目錄。而一些相關性強，不需要經常更新的欄目，例如：網站簡介、站長情況等可以合並放在一個統一目錄下。所有程序一般都存放在特定目錄，例如：CGI程序放在cgi-bin目錄，所有提供下載的內容也最好放在一個目錄下，便於維護管理。

●在每個主目錄下都建立獨立的Images目錄。一般來說，一個站點根目錄下都有一個默認地Images目錄。將所有圖片都存放在這個目錄里很是不方便，比如在欄目刪除時，圖片的管理相當麻煩。所以為每個主欄目建立一個獨立的Images目錄是方便管理的。原因很簡單，就是方便維護與管理。
其它需要注意的還有：目錄的層次不要太深，不要超過3層；不要使用中文目錄，使用中文目錄可能對網址的正確顯示造成困難；不要使用過長的目錄，太長的目錄名不便於記憶；盡量使用意義明確的目錄，以便於記憶和管理。

網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點並不是分布在一個平面上，而是存在於一個立體的空間中。一般的，建立網站的鏈接結構有兩種基本方式：

●樹狀鏈接結構（一對一），這類似DOS的目錄結構，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。這樣的鏈接結構瀏覽時，一級級進入，一級級退出，條理比較清晰，訪問者明確知道自己在什麼位置，不會「不知身在何處」，但是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須回到首頁再進行。

●星狀鏈接結構（一對多），類似網路伺服器的鏈接，每個頁面相互之間都建立有鏈接。這樣瀏覽比較方便，隨時可以到達自己喜歡的頁面。但是由於鏈接太多，容易使瀏覽者迷路，搞不清自己在什麼位置，看了多少內容。

因此，在實際的網站設計中，總是將這兩種結構混合起來使用。網站希望瀏覽者既可以方便快速地達到自己需要的頁面，又可以清晰地知道自己的位置。所以，最好的辦法是：首頁和一級頁面之間用星狀鏈接結構，一級和二級頁面之間用樹狀鏈接結構。關於鏈接結構的設計，在實際的網頁製作中是非常重要一環，採用什麼樣的鏈接結構直接影響到版面的布局。

③進行形象設計

網站的設計可以從以下幾點出發：

●設計網站標志(LOGO)。LOGO是指網站的標志，標志可以是中文、英文字母，也可以是符號、圖案等。標志的設計創意應當來自網站的名稱和內容。比如：網站內有代表性的人物、動物、植物，可以用它們作為設計的藍本，加以卡通化或者藝術化；專業網站可以以本專業有代表的物品作為標志。最常用和最簡單的方式是用自己網站的英文名稱作標志，採用不同的字體、字母的變形、字母的組合可以很容易製作好自己的標志。

●設計網站色彩。網站給人的第一印象來自視覺沖擊，不同的色彩搭配產生不同的效果，並可能影響到訪問者的情緒。「標准色彩」是指能體現網站型象和延伸內涵的色彩，要用於網站的標志，標題，主菜單和主色塊。給人以整體統一的感覺。至於其它色彩也可以使用，但應當只是作為點綴和襯托，絕不能喧賓奪主。一般來說，一個網站的標准色彩不超過3種，太多則讓人眼花繚亂。適合於網頁標准色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。

●設計網站字體。和標准色彩一樣，標准字體是指用於標志，標題，主菜單的特有字體。一般網頁默認的字體是宋體。為了體現站點的「與眾不同」和特有風格，可以根據需要選擇一些特別字體。製作者可以根據自己網站所表達的內涵，選擇更貼切的字體。需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的計算機里沒有安裝特別字體，那麼辛苦設計製作便可能付之東流了。

●設計網站宣傳語。也可以說是網站的精神、主題與中心，或者是網站的目標，用一句話或者一個詞來高度概括。用富有氣勢的話或詞語來概括網站，進行對外宣傳，可以收到比較好的結果。

要領五：確定網站風格

「風格」是抽象的，是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標志，色彩，字體，標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值等等諸多因素，網站可以是平易近人的、生動活潑的也可以是專業嚴肅的。不管是色彩、技術、文字、布局，還是交互方式，只要你能由此讓瀏覽者明確分辨出這是你網站獨有的，這就形成了網站的「風格」。

風格是有人性的，通過網站的色彩、技術、文字、布局、交互方式可以概括出一個站點的個性：是粗獷豪放的，還是清新秀麗的；是溫文儒雅的，還是執著熱情的；是活潑易變的，還是墨守成規的。

總之，有風格的網站與普通網站的區別在於：在普通網站上你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，比如信息量多少，瀏覽速度快慢等；在有風格的網站上你可以獲得除內容之外的更感性的認識，比如站點的品位，對瀏覽者的態度等。

在明確自己想給人以怎樣的印象後，要找出網站中最有特色的東西，就是最能體現網站風格的東西。並以它作為網站的特色加以重點強化、宣傳。總之，風格的形成不是一次定位的，你可以在實踐中不斷強化、調整、改進。

要領六：有創意的內容選擇

好的內容選擇需要有好的創意，作為網頁設計製作者，最苦惱的就是沒有好的內容創意。網路上的最多的創意即是來自於虛擬同現實的結合。創意的目的是為了更好的宣傳與推廣網站，如果創意很好，卻對網站發展毫無意義，那麼，網站設計製作者也應當放棄這個創意。另外，主頁內容是網站的根本之所在，如果內容空洞，即使頁面製作地再怎樣精美，仍然不會有多少用戶。從根本上說，網站內容仍然左右著網站流量，內容為王（Content Is King）依然是個人網站成功的關鍵。

要領七：推廣自己的網站

網站的營銷推廣在個人網站的運行中也占著重要的地位，在推廣個人網站之前，請確保已經做好了以下內容：網站信息內容豐富、准確、及時；網站技術具有一定專業水準，網站的交互性能良好。一般來說，網站的推廣有以下幾種方式：

（1）搜索引擎注冊與搜索目錄登錄技巧

注冊著名的搜索引擎站點是在技術上推廣網站的第一步。注冊搜索引擎有一定的技巧，像AltaVista、搜索客這樣的搜索引擎，它自動收錄提交的網址。另外，注意Meta的使用，不要提交分欄Frame頁面，大部分搜索引擎不識別Frame，所以一定要提交有內容的Main頁面。

而像Yahoo、搜狐等搜索目錄網站採用手工方式收錄網址，以保證收錄網站的質量，在分類查詢時獲得的信息相關性比搜索引擎站點（靠Spider自動搜索的）更強。由於搜索目錄網站收錄網站的人為因素相對較多，因此在提交網站時要注意遵守規則。如Yahoo要求注冊站點描述不超過25個單詞。在此要注意：將網址提交到最合適的目錄下面，要認真詳細的介紹網站，千萬不要有虛假、誇張的成分。

（2）廣告交換技巧

很多個人站點在相互廣告交換時都提出了幾個條件：第一，訪問量相當；第二，首頁交換。顯而易見，這種做法是為了充分利用廣告交換。以很多個人網站的經驗，當與一個個人站點交換鏈接時，對方把網站的LOGO放到了友情連接一頁，而不是首頁時，很少有訪客會來自那裡。通常在首頁，廣告交換才會有很好的效果。

（3）目標電子郵件推廣

使用電子郵件宣傳網址時，主要有如下技巧：可以使用免費郵件列表來進行，只要你申請了免費郵件列表服務，你就可以利用郵件列表來推廣你的網站；可以通過收集的特定郵件地址，來發送信息到特定的網路群體，在特定網路群體中推廣自己的網站；發送HTML格式的郵件，即使其內容與接收者關系不大，也不會被被當作垃圾信件馬上刪掉，人們至少會留意一下發送者的地址。不過，在進行郵件推廣的時候要注意網路道德。

要領八：支撐網站日常運行

當個人網站做到某一程度，就必須把賺錢提到議事日程上來，通常來說，個人網站獲取資金通常有以下兩個渠道：

（1）銷售網站的廣告位

要銷售網站的廣告位，一般來說，每日的流量少於1萬人次的網站在目前是不會吸引廣告主的。網站的專業性及商用性，以往的廣告經驗，技術以及設計要求等也會影響到廣告的銷售。

一般來說，WEB廣告的收費有三種方式：

①CPM (Cost Per Million/Thousand)

放一個廣告，它按每1,000人次來訪問站點收費。這方法對網站經營者最為合適，只要有人瀏覽該網頁，就得錢，不管訪問者對廣告有無反應——是否會看或點擊該廣告。

②點透（Click-through）

通過Banner廣告點到了廣告商的站點，這才算數，廣告商青睞這個，他只為對自己廣告感興趣的人「套錢「。網站經營者就不合適了，據一些調查資料表明，只有3%的訪問者會去「CLICK」廣告。

③提成 (Commission)

根據訪問者點擊位於你站點上廣告所帶來的銷售收入，從中跟做廣告的廠商分成，這種方法對於網站的經營者來說，比上面兩個都更加冒險。

通常的，個人網站的廣告收費方法往往是第一、第二種方法的結合，站點和廣告商都可少冒點險。

（2）與大型網站合作

另外，通過與大型網站合作，獲取經費，也可以維持個人網站的日常運行。不過，個人網站很容易會成為商業網站的附屬品。

有時間和充沛的體力，再加上對新技術和技巧的學習和應用，你就能為自己在網上建一個家了。

4、網站界面設計規范有哪些？

易用性規范

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 密碼輸入;在需求中定義密碼是否允許為空或空格;密碼是否允許特殊字元;是否區分大小寫，密碼的可輸入長度;程序中應給出文字說明密碼的可輸入長度。

5、UI界面設計規范有哪些？

用戶界面設計包含為機器和軟體創建的所有界面設計，例如網站和移動應用程序的外觀，以及它們的方向和易用性。GUI設計在用戶與應用程序或網站的交互方式中起著至關重要的作用，這意味著唯一良好的UI設計是實現簡化和無縫體驗的設計。

用戶界面設計要遵循哪些原則？
1、明確。
對任何界面而言，「明確」是首要的也是最重要的一點。設計師們在設計的時候，要去關心人們為何會使用這個應用，去了解什麼樣的界面是能幫助他們與之互動的，去預測人們在使用時的行為並能夠成功地反饋給他們。

2、交互。
界面的存在是為了讓人和我們的世界產生互動。它的功用和效果是可以被測量的。但是它們不是功利性的。優秀的界面不但能夠讓我們做事有效率，還能夠激發、喚起和加強我們與這個世界的聯系。

3、直觀操作。
要抓住直觀操作這個最初的目標，界面設計要盡可能的簡潔，更多的可識別的慣用自然手勢。理想情況下，界面會變得非常細微，用戶在會有直觀操作的感覺。

4、讓用戶掌控一切。
人們會在自己能掌控的環境中感覺最舒心、最放鬆。通過定期的梳理系統狀態，描述因果關系，並且在每一步操作都給出提示，讓用戶感覺每一步操作都在他的掌控中。

5、遵循用戶行為。
人總是對符合期望的行為最感舒適。因此，設計出來的元素，看起來應該像它們本身特徵一樣。在具體操作中，這意味著用戶只要看到這個界面元素，就應該能猜測出這個元素是做什麼的。

6、前後一致。
為了保持一致性，新手設計師通常在會把相同的視覺處理(重用代碼)方式用在，應該用不同的視覺處理方式的元素上。

7、視覺層次。
強烈的視覺層次會讓畫面有清晰的瀏覽次序。如果要在畫面中添加一個視覺強烈的元素時，設計者應該要重新調整頁面上所有元素的重量分配，來達到強烈視覺層次的效果。
了解用戶界面設計原則是你做出優秀作品的必要條件，而掌握UI設計師必備的技能才是你決勝高薪的關鍵。

6、要求：設計一個網頁，網頁中表單有一個文本框和按鈕，在點擊按鈕提交時，利用JavaScript獲取文本框

表單呢，我就沒全部寫出來了，我幫text文本框和button按鈕幫你做出來了，效果也做出來了，你自己看看，有什麼不懂的可以問我

<body>
<input type="text" value="" placeholder="請輸入郵箱" id="yx">
<br/>
<br/>
<button type="button" id="bt">提交</button>

<script>
var yx=document.getElementById("yx");
var bt=document.getElementById("bt");

bt.onclick=function(){
var reg=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/gi;
var str=yx.value;
var rel=reg.test(str);
if(rel){
alert("填寫正確");
}
else{
alert("填寫錯誤，請檢查");
}
}
</script>
</body>

7、一般網站設計的風格規范有哪些內容

大多數設計模板有兩個部分：
文字標准
視覺標准
這兩個標准，是同等重要的，都是整體風格規范的一部分。把元素結合在一起將建立一個整體形象。每一個品牌或企業網站都有自己與眾不同的地方。選擇一個色調和風格，同步運用在字體和視覺畫面的效果上，把你的網站和用戶融為一體。
建立網站整理形象的時候，也正是品牌需求考慮到用戶和相關利益的人對此有何種期望的時候。是否被期待？是否有關聯，是否願意在這樣的網站上進行瀏覽使用等交互行為？
語言風格

雖然我們將主要精力集中於網站風格規范的視覺方面，但語言風格是非常重要的，是整體網站的一部分，也是你與用戶「交談」的方式。語言風格是正式還是輕松的？是冗長或更簡潔的？
用同樣的方式為網站格式寫你的風格規范。這將有助於提示你的團隊知道網站的初步設想，以及如何運用語言風格去協助於品牌標識。
語言風格是與每一位用戶溝通使用的。返回到MailChimp，我們通過他的品牌語言風格的塑造上全面審視。注意到公司談論及它的吉祥物，舉個例子：「Freddie是我們的吉祥物。我們不需要使用他與我們的logo組合。Freddie的臉右側面的，他的表情一直是眨著眼睛的。」
「准則」及用途

你的風格規范應該是你設計的「劇本」。（可能是比「規范」聽起來更通俗易懂？）
它應該概括了如何以及何時使用的字體、顏色和所有其他設計元素類型，讓人更容易理解。包括：
調色板，包括標准色和可適用的色彩
排版，可適用的字體、字型大小、縮進、行間距跳轉
LOGO，包括尺寸和位置
圖標或元素樣式（包括分享按鈕等）
拼寫，選項和格式風格（應該遵循哪種編輯格式？ APA格式？AP格式？或其他？）
照片格式，包括顏色、裁剪尺寸和視覺效果
SEO信息，如ALT標簽和關鍵詞
電網標准（適用於網路或列印）
間距方面的考慮（是否設計的太松或太緊）
反饋接觸信息（可以向團隊成員提問或建議的）
簡單而具體的概念

這可能是最困難的部分，你需要明白這些信息，並將其爛熟於心，理解成簡單、具體、可操作性強的概念：
當涉及到風格規范不能走極端，只是一個視覺參考，而通過這種方式去設計。
組合相關內容，並快速相關聯，比如頁面的顏色、已經跳轉進入另一頁的圖形和照片等。
為可以顯示的內容舉一些相似的例子，不需要解釋的部分用佔位符。
盡可能地提供細節，色彩樣式，例如，包括RGB（或HEX ）和CMYK值等，使顏色可以規范使用。
打破部分常用的元素案例去設計。
片段和實例

無論你的設計風格規范是用於印刷還是數字使用或基於Web的文檔，應該包含有用的工具。部分有用的元素品牌案例做得到也可能做不到，但他可以很容易把重點放在你想看到的品牌視覺上。
然後，創建一個易操作的目錄。創建原型組（或一組常見的元素，這取決於你使用的軟體） 。保存在一個常用的位置，使其容易操作並且生成容易修改的文件。
為參與該項目的每個人提供基於雲端軟體的工具列表。（這包括鏈接、用戶名等基本信息。）確保所有字體包、logo和圖像文件是在一個常用的位置，所有的使用者都知道他們在哪裡。 （在另一個地方保留備份，以防原文件、作品丟失。）
創建代碼片段，易於復制並粘貼到項目主列表。這樣不用每次重建，常見的元素需要被分享在一個每個人都可以訪問的共享位置。
最後一步是進化優化。每件事情都可能會變，而且必然要經歷蛻變。
執行風格規范

最後，最大的問題是「如何讓人們遵循風格規范呢？」按照以上這些列出的內容，你已經有一個很好的方式擁有了設計的輪廓，具有了簡單、具體的概念。
風格規范是很容易被追隨的，就像你寫的網站一樣。語言是簡單的和不生僻的，可以讓人們去追隨這些准則。
風格規范應該留下足夠的設計空間對於其靈活性和實際製作上。就像你的品牌，在一定范圍內，可以幫助團隊成員發揮他們設計的創造力，也同時創造新的東西。風格規范的所有者也是如此，這是指批准、更新和變化設計風格規范的人，並能回答有關設計決策問題的所有人。這個「所有者」可以是個人團隊，或者更大組織的規模。

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

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

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

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

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

(8)網頁按鈕設計規范擴展資料：

網頁設計

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

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

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

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

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