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、網站界面設計
q
3、關於網站界面設計
表格容易排版
DIV可以隨意放位置(不過挺容易插亂,要小心一點)
一般一個頁面不要太多的DIV``3,4個就夠了
現在我上網看到的網站大多數都是用表格的 看上去很整齊``
4、求製作一個大型網站的具體的流程?
業務員與客戶進行溝通,包括:網站風格、功能(論壇、留言板、支付、用戶登錄等)。
業務員與美工溝通。製作網頁效果圖(首頁、列表頁、內容頁)。
製作人員開始切圖排版,排成網頁形式的。
後台程序員開始寫程序。
前台與後台合並在一起,整站就完成了。
排版的准備工作:
網站的素材:都要放到當前目錄下,與當前網頁放在一起。
創建一個html文件,來進行排版。
網頁的背景色。
確定主頁的寬度:當前流行的主頁寬度一般為1000px。
Web開發的分散性和交互性,決定了Web開發必須遵從一定的開發規范和技術約定,只有每個開發人員都按照一個共同的規范去設計、溝通、開發、測試、部署,才能保證整個開發團隊協調一致的工作,從而提高開發工作效率,提升工程項目質量。
1.網站域名和空間
域名是一個網站必不可少的部分。我們常見的網站後綴一般是選擇.COM和.CN的較多,.COM是國際域名的後綴,.CN是中國的域名。網站空間的用來存放網站內容和程序文件,比如:網頁、圖片、製品資料等等。
一般這部分的產品是由專門的IDC服務商提供,需要提前預備並做好備案工作。
2.網站設計策劃
對於大多數用戶來說,進入網站後第一眼看到的就是網站設計的結構布局。不同類型的網站設計也不一樣,在建站前期我們需要做一個合理的規劃,這個階段需要我們收集好素材,包含:內容文字、圖片、欄目結構、視頻文件等網站設計所需的各項資料。有時候,部分客戶對互聯網了解不多,對網站建設的流程頁不甚了解,往往以為網站設計完成即網站建設完成,要求發布網站。這是一個重大的誤解,網站設計的PSD完成,僅僅只是完成了建站工作中的一個部分而已。
3.網站製作及開發
網站設計完成之後,會有項目團隊中的前端開發人員對設計頁面進行切圖。這個過程有點像做定做衣服,由設計師畫好圖樣之後需要裁剪成各種布料,而成衣就是由這些布料縫制而成。這部分的工作非常重要,這部分的工作需要遵循設計稿的設計理念,並將設計界面轉化為可以網頁格式瀏覽的網頁,為後台程序的開發及整合做好准備。
開發及整合實現了後台功能及各項數據的綁定,這部分工作完成之後就可以出網站的測試地址,網站製作算是完成了80%以上。
4.項目開發流程
由項目經理牽頭,以程序員為重心,共同討論,完成用戶需求分析,產生網站的欄目規劃(用樹形圖表示),標出哪些是靜態頁面,哪些是動態頁面。動態頁面須要程序實現。制定網站的界面框架,包括首頁構圖,及各頁面間的鉤稽關系。產生各欄目文件夾的結構圖(一些公共文件夾如images、scripts、styles等需要固定存放,共同調用)。
然後由美工根據內容表現的需要,設計靜態網頁和其它動態頁面界面框架,該切分的圖片要根據尺寸切割開來。給需要程序動態實現的頁面預留頁面空間。制定字體、字型大小、超級鏈接等CSS樣式等。
在美工設計頁面的同時,程序員著手開發後台程序代碼,做一些必要的測試。
美工界面完成後,添加程序代碼,組合網站,由項目組共同聯調測試,發現bug,完善一些具體的細節。最後進行網站部署。
以上的每一部都會產生一些階段性成果,項目經理需要及時進行審核、監督,發現問題即使糾正。
5,測試發布
當網站程序編寫好的時候,就是一個網站的雛形了,但這個時候網站或多或少還是會有BUG們需要進行測試評估,不斷完善,並從用戶的角度去觀察,改善網站。當網站的問題都解決,我們就可以把網站上傳到伺服器空間里,解析域名到伺服器IP,這個時候域名就可以正式訪問網站了。
最後維護和推廣。一個好的網站需要不斷的升級完善才能保持活力,網站需要定期修復和升級,保障網站運營順暢,進行宣傳推廣。
5、UI設計,這幾個網站就夠了
網頁製作可以大體上分成四個工種:
1 美工
美工的主要任務是設計。了解用戶的意圖,分析網站配色,基本布局。繪制出一個網站效果圖。
美工需要掌握的知識體系應該包括網頁設計,UI(User Interface)用戶界面人機交互、操作邏輯、界面美觀的整體設計,UED(user experience design)用戶體驗設計--簡單來說就是如何使得網站更加便於交互。
2 前端開發
美工在完成設計效果圖之後,由前端開發人員將其製作成為適合瀏覽器查看的HTML頁面。
由於現在移動互聯網的大規模流行,加上各個不同廠商的瀏覽器的激烈競爭,前端開發的主要任務簡單來說就是使網頁在不同瀏覽器不同解析度不同設備上提供相似或相近的瀏覽體驗。
前端開發需要掌握的知識體系主要是兼容性問題的解決,流暢完美的交互體驗。具體到技術細節上就是HTML,CSS,JavaScript,各大公司各種不同內核的瀏覽器、各種各樣的JS庫、簡單的與後台交互的知識。
3 後台開發
前台開發完成之後,就是後台程序員的工作了,相比較前端來說,後台更像傳統意義上的程序員。後台的工作簡單來說就是網頁文件對資料庫的增刪改查。
後台需要掌握的知識體系應該包括,編程基礎,基本HTML語言,至少一門主流網頁語言(C#,C++,JAVA,PHP等),資料庫的操作等等。
4 宣傳推廣
前三個步驟完成之後,網站一定要推廣,簡單說就是營銷。
營銷人員應該掌握的知識體系應該包括SEO,SEM,線上線下推廣,事件營銷,危機公關等等復雜的知識。我對這個部分涉獵不多,不多說了。
另外,大型網站通常會在這四個崗位之間設立經理或有的公司叫網頁架構師,經理主要是用來協調,溝通,領導這四個崗位。
至於四個崗位有多少人就完全取決於公司的網站的規模了,我自己在2000年的時候做網頁基本上是四個活一個人做,除此之外還兼公司網管,電腦維修,有一段時間還兼司機,命苦啊~~
6、優秀的網站頁面設計說起來很簡單,可具體怎麼做?
額……理論知識這個東西,不懂的人的確是看不懂呀……我這說了估計還是理論知識,建議這種理論知識不要強迫自己理解, 用來學一學作為後期對別人給自己做的網站的檢查可能更好一點~
首先應該有一個設計方案,把想放在網站頁面設計上的東西做一個規劃,比如說網站的整體風格,欄目和項目的具體樣式有一個初步的規劃,定下了初稿之後,才能更好的進行下一步。這一步呢就需要你來好好思考一下了!
如果是跨國公司或者韓國本土公司,需要做韓語網站的話,還需要把相對應的項目翻譯一下,這樣才能讓網民有更高的閱讀體驗。並且這種情況建議使用三種語言,中文+該國語言+英語。
接下來就是具體的分步驟的網站頁面設計了。一般來說分三個部分,首頁,欄目頁,內容頁。那麼大部分公司網站如何製作的呢?很大一步部分的公司網站都會選擇把公司的logo放在左上角或者右上角等比較醒目的位置上。
頂部做一個導航欄,假如網頁的整體背景使用的是公司圖片的話,最好建議導航欄設計的與眾不同一點,但是不要遮擋別的信息。欄目頁,和內容頁就比較簡單,頂部底部不變,中間按照自己的需求改一下就ok了。
除了頁面布局的規劃、色彩的搭配、字體的選取需合理得當,還應合理利用標簽、靜態網頁還是動態網頁的選擇上有一個篤定的規劃。標簽建議不要太少或太長,合理地利用網頁標題、描述、關鍵字才能在同行業中具有競爭力。網頁選擇上建議選擇靜態網頁,靜態網頁更容易被搜索引擎檢索。除此之外,網頁文件名的設置也格外重要,忌設置一些復雜、深奧的文件名。
總而言之,優秀的網站頁面設計需要明確設計思路、有條不紊的欄目設置、熟悉製作流程、重視鏈接的插入、標簽的設置、文件名的命名以及獨立性、關聯性的考量。只要遵循圍繞主題進行的設計理念,才可以擁有一個適合自己公司,對公司有幫助的網站~
以上就是設計小能手redtrans_cs小姐姐的意見了~以下提供點我做的某韓國公司網站的一小部分參考~
7、哪家公司做網站的界面設計漂亮
這個抄問題應該這么說,只要網站建設公司有給力的技術人員都可以做出漂亮的網站。
但是請君注意,做網站可不只是為了好看的,千萬不要一味的追求效果而忘記了做網站的根本目的。
做網站建議找有專業網站策劃人員的公司,在保證有良好用戶體驗的前提下能夠有更好的客戶轉化,這才是重要的,次要才考慮網站的設計效果。畢竟現在大多數企業做網站都是需要推廣效果的。
銳美網路-羅嘯
8、市場上好的網站界面設計的書籍(大約10本)有哪些?
曹金明等.《網頁設計與配色》.北京:北京希望電子出版社 紅旗出版社. 2005.
創意源(網頁創意)/現代創意設計叢書 湖北美術出版社
比爾.加德納,凱瑟琳.費舍爾.《21世紀超級標志設計》.上海:上海人民美術出版社.2004.
吉姆.克勞斯.《版式設計指南》.上海:上海人民美術出版社.2002.
張旭生 《網頁版式設計指南》國防工業出版社
吉姆.克勞斯.《創意設計指南》.上海:上海人民美術出版社.2002.
騰龍視覺 .《Photoshop CS2經典網頁特效表現完美風暴》(附光碟)人民郵電出版社.2008
視覺中國.《網頁設計精品解讀》電子工業出版社.2007
胡崧.《網頁色彩與版式設計創意實戰》(附贈1CD) 中國青年出版社.2006
龍飛.《中文版Photoshop CS2 時尚網頁設計經典商用案例》(附贈光碟)上海科學普及出版社. 2007
安小龍.《 Adobe Photoshop典型應用實例:網頁設計篇》(附CD-ROM光碟一張)中國青年出版社. 2006
(韓)黃在賢.《設計師談精彩網頁設計》(附光碟)電子工業出版社.2004