第一篇：ui界面視覺藝術設計
UI設計規范（流程、界面）
UI設計(流程/界面)規范
一：UI設計基本概念與流程
1.1
目的
規范公司UI設計流程，使UI設計師參與到產品設計整個環節中來，對產品的易用性進行全流程負責，使UI設計的流程規范化，保證UI設計流程的可操作性。
1.2范圍
l
界面設計
l
此文檔用于界面設計,本文檔的讀者對象是項目管理人員、售前服務人員、UI界面設計人員、界面評審人員和配置測試人員。
1.3
概述
UI設計包括交互設計，用戶研究，與界面設計三個部分?；谶@三部分的UI設計流程是從一個產品立項開始，UI設計師就應根據流程規范，參與需求階段、分析設計階段、調研驗證階段、方案改進階段、用戶驗證反饋階段等環節，履行相應的崗位職責。UI設計師應全面負責產品以用戶體驗為中心的UI設計，并根據客戶(市場)要求不斷提升產品可用性。本規范明確規定了UI設計在各個環節的職責和要求，以保證每個環節的工作質量。
1.4
基本介紹
A、需求階段
軟件產品依然屬于工業產品的范疇。依然離不開3W的考慮(Who,where,why.)也就是使用者，使用環境，使用方式的需求分析。所以在設計一個軟件產品之前我們應該明確什么人用(用戶的年齡，性別，愛好，收入，教育程度等)。什么地方用(在辦公室/家庭/廠房車間/公共場所)。如何用(鼠標鍵盤/遙控器/觸摸屏)。上面的任何一個元素改變結果都會有相應的改變。
除此之外在需求階段同類競爭產品也是我們必須了解的。同類產品比我們提前問世，我們要比他作的更好才有存在的價值。那么單純的從界面美學考慮說哪個好哪個不好是沒有一個很客觀的評價標準的。我們只能說哪個更合適，更合適于我們的最終用戶的就是最好的。
B、分析設計階段
通過分析上面的需求，我們進入設計階段。也就是方案形成階段。我們設計出幾套不同風格的界面用于被選。
C、調研驗證階段
幾套風格必須保證在同等的設計制作水平上，不能明顯看出差異，這樣才能得到用戶客觀真實的反饋。
測試階段開始前我們應該對測試的具體細節進行清楚的分析描述。
調研階段需要從以下幾個問題出發：
用戶對各套方案的第一印象
用戶對各套方案的綜合印象
用戶對各套方案的單獨評價
選出最喜歡的
選出其次喜歡的
對各方案的色彩，文字，圖形等分別打分。
結論出來以后請所有用戶說出最受歡迎方案的優缺點。
所有這些都需要用圖形表達出來，直觀科學。
D、方案改進階段
經過用戶調研，我們得到目標用戶最喜歡的方案。而且了解到用戶為什么喜歡，還有什么遺憾等，這樣我們就可以進行下一步修改了。這時候我們可以把精力投入到一個方案上，將方案做到細致精美。
E、用戶驗證階段
改正以后的方案，我們可以將他推向市場。但是設計并沒有結束。我們還需要用戶反饋，好的設計師應該在產品上市以后去站柜臺。零距離接觸最終用戶，看看用戶真正使用時的感想。為以后的升級版本積累經驗資料。
經過上面設計過程的描述，大家可以清楚的發現，界面UI設計是一個非?？茖W的推導公式，他有設計師對藝術的理解感悟，但絕對不是僅僅表現設計師個人的繪畫。所以我們一再強調這個工作過程是設計過程。UI界面設計不存在美工。
2.
UI設計流程
2.1
概述
根據上述原則，分析公司產品的特點，制定符合軟件產品(或項目)生命周期的UI設計流程。每個產品(或項目)的生命周期中，UI設計師應該嚴格按照流程，完成每個環節的職責，確保流程準確有效的得到執行，從而提高產品的可用性，提升產品質量。
二：UI界面用戶體驗設計原則與規范
1：應該遵循的基本原則
無論是控件使用，提示信息措辭，還是顏色、窗口布局風格，遵循統一的標準，做到真正的一致。
這樣得到的好處：
1：使用戶使用起來能夠建立起精確的心里模型，使用熟練了一個界面后，切換到另外一個界面能夠很輕松的推測出各種功能，語句理解也不需要費神理解
2：降低培訓、支持成本，支持人員不會行費力逐個指導。
3：給用戶統一感覺，不覺得混亂，心情愉快，支持度增加
做法：
項目組有經驗人士，確立UI規范：
美工提供色調配色方案，提供整體配色表
界面控制程序人員、用戶體驗人員提出合理統一使用的控件庫。參考標準界面使用規范：
控件功能遵循行業標準，windows平臺參見《Microsoft
用戶體驗》
控件樣式在允許的范圍內可以統一修改其樣式、色調
參考其他軟件先進操作，提取對本項目有用的功能，以使用，絕對不能盲從，漫無目的。
根據需要，設計特殊操作控件，準則為：簡化操作、達到一定功能目的
界面實施人員與美工商榷控件可實現性,(如不實行此步驟，將會導致各自對對方工作不滿意，也會產生不一致的混亂)。重復疊代上述工作。
建立合理化文檔《UI標準》描述上述規范，
強行界面設計者理解之，并作為開發準則，
SQA人員進行監控開發人員是否遵循，及時告誡開發人員。
2：(Color)顏色使用恰當，遵循對比原則：
1：統一色調，針對軟件類型以及用戶工作環境選擇恰當色調：
如：安全軟件，根據工業標準，可以選取黃色，綠色體現環保，藍色表現時尚、紫色表現浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等
2：如果沒有自己的系列界面，采用標準界面則可以少考慮此方面，做到與操作系統統一，讀取系統標準色表
3：色盲、色弱用戶，即使使用了特殊顏色表示重點或者特別的東西，也應該使用特殊指示符，?quot;!，?著重號，以及圖標等
4：顏色方案也需要測試，常常由于顯示器、顯卡的問題，色彩表現每臺機器都不一樣，應該經過嚴格測試，不同機器進行顏色測試
5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍色沒有足夠反差，而藍色和白色反差很大。除非特殊場合，杜絕使用對比強烈，讓人產生憎惡感的顏色。
6：整個界面色彩盡量少的使用類別不同的顏色
itop色表
具體標準參考美術學統計學術標準。
色表的建設，對于美工在圖案設計、包裝設計上起著標準參考作用，對于程序界面設計人員設計控件、窗體調色起到有章可循的作用。
3：(Resource)資源
一個多姿多彩的人機交互界面，少不了精美的鼠標光標、圖標以及指示圖片、底圖等。
1：也需要遵循統一的規則，包括上述顏色表的建立，圖標的建立步驟也應該盡可能的形成標準，參考itop的outlookbar圖標設計標準
2：有標準的圖標風格設計，有統一的構圖布局，有統一的色調、對比度、色階，以及圖片風格
3：底圖應該融于底圖，使用淺色,
低對比，盡量少的使用顏色。
4：圖標、圖像應該很清晰的表達出意思，遵循常用標準，或者用戶機器容易聯想的到物件，絕對不允許畫出莫名奇妙的圖案。
5：鼠標光標樣式統一，盡量使用系統標準，杜絕出現重復的情況，例如某些軟件中一個手的形狀就有4鐘不同的樣子。
4：(Font)字體
使用統一字體，字體標準的選擇依據操作系統類型決定。
中文采用標準字體，“宋體”，英文采用標準
Microsoft
Sans
Serif
不考慮特殊字體(隸書、草書等,特殊情況可以使用圖片取代),保證每個用戶使用起來顯示都很正常。
字體大小根據系統標準字體來，例如
MSS字體8磅，宋體的小五號字(9磅)五號字(10.5磅)。
所有控件盡量使用大小統一的字體屬性，除了特殊提示信息、加強顯示等例外情況
ITop采用BCB，所有控件默認使用
parent
font，不允許修改，這樣有利于統一調整。
·系統大小字體屬性改變的處理。
Windows系統有個桌面設置，設置大字體屬性，很多界面設計者常常為這個惱火，如果設計時遵循微軟的標準，全部使用相對大小作為控件的大小設置，當切換大小字體的時候，相對不會有什么特殊問題。
但是由于常常方便使用點陣作為窗口設計單位，導致改變大字體后，出現版面混亂的問題。
這個情況下，應該做相應處理：
1：寫程序自動調節大小，點陣值乘以一個相應比例
2：全部采用點陣作為單位，不理會系統字體的調節，這樣可以減少調節大字體帶來的麻煩。BCB/DELPHI中多采用這種方法，但是必然結果是和系統不統一。
5：(Text)文字表達
提示信息、幫助文檔文字表達遵循以下準則：
1：口語化、客氣、多用您、請，不要用或少用專業術語，杜絕錯別字
2：斷句逗號句號頓號分號的用法，
提示信息比較多的話，應該分段，
3：警告、信息、錯誤
使用對應的表示方法
4：使用統一的語言描述，例如一個關閉功能按鈕，可以描述為退出、返回、關閉，則應該統一規定。
5:
根據用戶不同采用相應的詞語語氣語調，如專用軟件，可以出現很多專業屬于，用戶為兒童：這可以語氣親切和藹，老年用戶則應該成熟穩重。制定標準遵循之。
6：(STYLE)控件風格，不要使用錯誤控件，控件功能要專一
有設計好的同一風格的控件，如果沒有能力設計出一套控件，則使用標準控件，絕對不能不倫不類，雜亂無章
·不要錯誤使用控件，例如：
使用Button樣式做TTable的功能，拿主菜單條顯示版權信息，
·統一類型的控件操作方式相同，例如一個控件雙擊可以執行某些動作，而同樣控件，雙擊卻沒有任何反映
·一個控件只做單一功能，不復用
很多人為了寫程序方便，喜歡把一個控件在不同情況下做不同功能用，這些對用戶初次理解增加難度，只有用戶熟悉后才能理解。
例如
改變紅色選項，左邊的參數代表不同的設置，可能由于為了節省控件或者編程量，但是只有熟練用戶才回使用，這種情況下解決方法：
1:分組，使用雙份控件
2：使用TABLE頁，給用戶很明顯的視覺變化
==========================================================================
總結起來就是：
1.
產品制作人，寫產品計劃書。
2.
用戶體驗研究員，作調查分析。
3.
信息建構師，設計產品架構。
4.
互動設計師，作出互動流程。
5.
視覺設計師和用戶界面設計師，作出頁面視覺設計。
6.
前臺工程師，前臺開發。
7.
后臺工程師，后臺開發。
8.
用戶體驗研究員，做用戶測試確保質量。
1.確認目標用戶
在軟件設計過程中，需求設計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標用戶的不同引起的交互設計重點的不同。例如：對于科學用戶和對于電腦入門用戶的設計重點就不同。
2.設計目標一致
軟件中往往存在多個組成部分(組件、元素)。不同組成部分之間的交互設計目標需要一致。例如：如果以電腦操作初級用戶作為目標用戶，以簡化界面邏輯為設計目標，那么該目標需要貫徹軟件(軟件包)整體，而不是局部。
3.元素外觀一致
交互元素的外觀往往影響用戶的交互效果。同一個(類)軟件采用一致風格的外觀，對于保持用戶焦點，改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統一的衡量方法。因此需要對目標用戶進行調查取得反饋。
7.可用性原則
7.1可理解
軟件要為用戶使用，用戶必須可以理解軟件各元素對應的功能。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應的功能。例如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認刪除操作，用戶可以更加詳細的理解該元素對應的功能，同時可以取消該操作。
7.2可達到
用戶是交互的中心，交互元素對應用戶需要的功能。因此交互元素必須可以被用戶控制。用戶可以用諸如鍵盤、鼠標之類的交互設備通過移動和觸發已有的交互元素達到其它在此之前不可見或者不可交互的交互元素。要注意的是交互的次數會影響可達到的效果。當一個功能被深深隱藏(一般來說超過4層)那么用戶達到該元素的幾率就大大降低了?？蛇_到的效果也同界面設計有關。過于復雜的界面會影響可達到的效果。(參考簡單導向原則)
Quote
[階段一：分析]
1、用戶需求分析
2、用戶交互場景分析
3、競爭產品分析這兩者可以說是相輔相成的。
對于一個較為正規的項目而言，必然有對用戶需求的分析內容。其中用戶UI需求是重要的組成部分。如果說UI設計原則是所有UI設計的出發點的話，那么用戶UI需求就是本次設計的出發點。好的UI設計建立在對用戶深刻了解之上。因此用戶交互場景分析就很重要。對于大部分項目組來說也許沒有時間和精力去實際勘查用戶的現有交互、制作完善的交互模型考察，但是UI設計人員在分析的時候一定要站在用戶角度思考：如果我是用戶，這里我會需要什么。競爭產品能夠上市并且被UI設計者知道，必然有其長處。這就是所謂三人行必有我師的意思。每個設計者的思維都有局限性，看到別人的設計會有觸類旁通的好處。當然有的時候可以參考的并不一定是競爭產品。
[階段二：設計]
采用面向場景、面向事件驅動和面向對象的設計方法。
UI設計著重于交互，因此必然要對最終用戶的交互場景進行設計。軟件是交互產品，用戶所作的就是對軟件事件的響應以及觸發軟件內置的事件。因此要面向事件設計?，F在的程序開發主流采用的是面向對象設計。面向對象設計可以有效的體現面向場景和面向事件的特點。設計的四個要素：交互對象,數據對象,事件(交互事件和異常),動作
[階段三：開發]
通過：用戶交互case圖(說明用戶和系統之間的聯系)用戶交互流程圖(說明交互和事件之間的聯系)交互功能設計圖(說明功能和交互的對應關系)
最終得到UI的設計產品。
[階段四：驗證]
正如UI交互設計原則探討文中提到的，對于UI產品的驗證主要從下面幾個方面入手：
1、功能性對照UI設計的再好，和需求不一致也不可以。
2、實用性內部測試UI設計的最重要點就是實用性。
3、用戶焦點小組UI設計是否優秀的重要衡量依據。最后，說一點其他的問題?，F在往往認為交互式設計和最終的UI效果設計可以截然分開。這就好比說需求可以和設計截然分開，是不可能的。
Quote
UI設計流程以及設計師參與的環節
最近的工作中總結出一條結論：擁有一個完善規范的流程，是決定著一個項目走向成功或失敗的關鍵。
對于UI設計的工作流程，我覺得可以根據“市場分析-用戶分析-架構-原型-界面-輸出-完善”這條主線制定，每個環節UI設計師都應參與其中。
1.產品定位與市場分析
這一類工作大多都是由新產品研發部門以及市場需求完成的，但UI設計師應了解產品的市場定位、產品定義、客戶群體、運營方式等。
2.用戶研究與分析
這個過程是非常重要的，設計師應該找到合適的方法來完成此環節。你可以搜集相關資料分析目標用戶的使用特征、情感、習慣、心里、需求等，提出用戶研究報告和可用性設計建議。這部分工作也可和團隊配合完成。時間與項目需求允許的情況下，更可以制定實景用戶分析。
3.架構設計
這里涉及到比較多的界面交互與流程的設計，根據可用性分析結果制定交互方式、操作與跳轉流程、結構、布局、信息和其他元素。
4.原型設計
我覺得這里應該是一個小的階段標志，要對前面所有工作加以設計方面的實施，根據進度與成本，可以把原型控制在“手繪-圖形-FLASH-視頻”幾個質量范圍。原型的本質更傾向與一個DEMO，它不需要有全部的功能，但要體現出設計對象的基本特性。
5.界面設計
如果很傾向于圖形界面設計，這兒是你最喜歡的部分。但一定要結合循環討論過的分析結果做設計，否則你的作品很難被人信服。色調、風格、界面、窗口、圖標、皮膚的表現是本環節的關鍵。
6.界面輸出
作為設計師，在這一部分的工作就是配合好開發人員完成相關的界面結合。
7.完善工作
這個環節是很多部門共同參與的，包括可用性的循環研究、用戶體驗回饋、測試回饋。同時，UI人員也應該把一些可行性建議進行完善。很多設計師做了東西不喜歡改，這是一個大忌。
如上的流程，可能會有很多部門共同參與完成，UI設計師如何與團隊配合并發揮自己應有的作用非常重要。一名合格的UI設計師，應該能貫穿整個UI流程進行工作，而并非是單純的圖形界面設計。
第二篇：UI界面設計概念教程——從無到有界面設計暢想曲
從無到有界面設計暢想曲
版權信息：uiforce版權所有，禁止商業用途(個人可學習參考)
展現出界面設計整個流程，將概念和視覺元素通過故事串聯起來，一次艱難的嘗試
第三篇：qt作業：設計簡單的UI界面
qt第二次作業：
1.通過qt designer設計界面如下：
2.通過槽函數實現功能，主要代碼如下： dialog.h的主要部分： private slots:
void on_IconListWidget_currentRowChanged(int currentRow);
void on_sendBtn_clicked();
void on_exitBtn_clicked();
void on_boldTBtn_clicked(bool checked);
void on_italicTBtn_clicked(bool checked);
void on_underlineTBtn_clicked(bool checked);
void on_fontCbx_currentFontChanged(const QFont &f);
void on_sizeCbx_currentIndexChanged(const QString &arg1);
void on_textBtn_clicked(bool checked); void on_hindBtn_clicked(); dialog.cpp中的函數實現：
void Dialog::on_IconListWidget_currentRowChanged(int currentRow) { ui->stackedWidget->setCurrentIndex(currentRow+1); }
void Dialog::on_sendBtn_clicked() { QString input=ui->textEdit_Msg->toPlainText(); ui->textBrowser_Msg->append(input); ui->textEdit_Msg->clear(); }
void Dialog::on_exitBtn_clicked() { this->close(); }
void Dialog::on_boldTBtn_clicked(bool checked) { if(checked) ui->textEdit_Msg->setFontWeight(QFont::Bold); else
ui->textEdit_Msg->setFontWeight(QFont::Normal); ui->textEdit_Msg->setFocus(); }
void Dialog::on_italicTBtn_clicked(bool checked) { ui->textEdit_Msg->setFontItalic(checked); ui->textEdit_Msg->setFocus(); }
void Dialog::on_underlineTBtn_clicked(bool checked) { ui->textEdit_Msg->setFontUnderline(checked); ui->textEdit_Msg->setFocus(); } void Dialog::on_fontCbx_currentFontChanged(const QFont &f) { ui->textEdit_Msg->setCurrentFont(f); ui->textEdit_Msg->setFocus(); }
void Dialog::on_sizeCbx_currentIndexChanged(const QString &arg1) { ui->textEdit_Msg->setFontPointSize(arg1.toDouble()); ui->textEdit_Msg->setFocus(); }
void Dialog::on_textBtn_clicked(bool checked) { if(checked) { ui->fontCbx->setVisible(true); ui->sizeCbx->setVisible(true); ui->boldTBtn->setVisible(true); ui->italicTBtn->setVisible(true); ui->underlineTBtn->setVisible(true); } else
{ ui->fontCbx->setVisible(false); ui->sizeCbx->setVisible(false); ui->boldTBtn->setVisible(false); ui->italicTBtn->setVisible(false); ui->underlineTBtn->setVisible(false); } }
void Dialog::on_hindBtn_clicked() { if(ui->listWidget_Inf->isVisible()) ui->listWidget_Inf->setVisible(false); else
ui->listWidget_Inf->setVisible(true); } 實現結果：
1.三個用戶之間切換：
2.文字輸入：
3.按鈕A的切換：
4.字體實現:
5.側邊欄隱藏：
6.添加備注：因為我用listwidget顯示信息，直接將備注空白欄設為editable即可：
第四篇：談網站界面設計(UI設計)-好資料免費分享
內容摘 要：
今日的網站已經不單單只是人們查詢資料的工具，它已糅合了多種功能于一身，在網站為人們的學習、生活、工作、娛樂提供越來越重要的信息時，人們都它的要求也與日俱增，對界面的要求也不僅僅是停留在美觀上。就此，本文在討論一些基本的網頁設計原理的同時還特別強調了UI在網頁設計中的運用。
關鍵詞： 網頁 界面設計 UI 布局 色彩
緒 論
上世紀最偉大的發明莫過于互聯網的發明，進入21世紀，互聯網代表著一種嶄新的信息交流方式，它使信息的傳播突破了傳統的政治、經濟、地域及文化的阻隔，使信息傳達的范圍、速度與效率都產生了質的飛躍。如果把互聯網比做一棵大樹，那成千上萬的網站則是組成這參天大樹的枝條，而每個網站都是由諸多網頁構成那么網頁就是這參天大樹上數不清的葉子，故網頁是構成互聯網的基本元素。我國這兩年的網絡發展非?？?，每天都有數以千計的網站誕生，其中的網頁數量更是成幾何式的增長，然而關乎網站形象和瀏覽者用戶體驗的網站界面設計卻不容樂觀。除了一些大的專業網站在版面的編排上比較講究之外，其他很少見到界面設計考究、美術創意優秀的中文網站。如何設計出美觀(吸引受眾眼球)的網頁，如何用優秀的用戶體驗贏得受眾的一次又一次的瀏覽仿佛一夜間就擺在了眾設計師的案頭。就此本文從以下幾點討論了關于
網站界面設計所需要重視的問題。
一、認識UI
(一)什么是 UI ：
UI的本意是用戶界面，是英文User和 interface的縮寫。
(二)什么是 GUI：
Graphics User Interface 圖形用戶界面，也就是我們今天要主要研究的東西。
(三)什么是用戶界面設計：
在人和機器的互動過程中，最重要的一個方面就是我們所說的界面(。用戶界面設計是屏幕產品的重要組成部分。大致界面可分為感覺(視覺、觸覺、聽覺等)和情感兩個層次。界面設計是一個需要多方面專業知識的工作，認知心理學、設計學、語言學等在此都扮演著重要的角色。用戶界面設計的三大原則是：置界面于用戶的控制之下;減少用戶的記憶負擔;保持界面的一致性。從字面上看是用戶與界面2個組成部分，但實際上還包括用戶與界面之間的交互關系，所以這樣可分為3個方向，他們分別是：用戶研究、交互
設計、界面設計。
1.用戶研究
用戶研究包含兩個方面：一是可用性研究，研究如何提高產品的可用性，使得網站界面的設計更容易被人接受、使用和記憶;二是通過可用性的研究，發掘用戶的潛在需求，為技術創新提供另外一條思路和方法。用戶研究是站在人文學科的角度來研究產品，研究用戶的需要，站在用戶的角度介入到產品的開發和設計中。對于設計師來說就是研究如何使自己的網站頁面更收瀏覽者的歡迎
用戶研究通過對于用戶的使用環境、瀏覽習慣等研究，使得在網站界面設計的前期能夠把用戶對于網站功能的期望、對設計和外觀方面的要求融入到網站的開發與設計過程中去。
2.交互設計
這部分指人與機之間的交互工程，在過去交互設計也由程序員來做，其實程序員擅長編碼，而不善于與最終用戶交互。在使用網站的過程中最能給瀏覽者留下深刻印象的一定是網站的視覺因素，也就是我們所談論的網站界面。所以，很多的網站雖然功能比較齊全，但是交互方面設計很粗糙，繁瑣難用，使用困難。如何使瀏覽者在使用網站時可以輕松自如的找到自己想要的資源，如何輕松實現網站的功能，給瀏覽者以愉悅的心情，拉攏瀏覽者下一次的登陸，這些都需要在網站的交互設計上下足工夫。
3.界面設計
在漫長的軟件發展中，界面設計工作一直沒有被重視起來。做界面設計的人也被貶義的稱為“美工”。其實網站界面設計就像工業產品中的工業造型設計一樣，是產品的重要買點。一個友好美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為網站創造賣點。如果把網站比做一個人的話，網站的后臺編程好比人的骨骼與肌肉，而界面則是者個人的外表，人人都喜歡美人，同樣有著良好視覺感受的網站界面也是網站拉攏人氣的關鍵所在。網站界面是網站靈魂的外在表現，忽略網站的界面設計最終會使你的網站輸在起跑線上。界面設計不是單純的美術繪畫，他需要定位使用者、使用環境、使用方式并且為最終用戶而設計，是純粹的科學性的藝術設計。檢驗一個界面的標準即不是某個項目開發組領導的意見也不是項目成員投票的
結果，而是最終用戶的感受。
(四)界面構成要素
互聯網與傳統媒體最大的不同就在于除了文字和圖像以外，還包含聲音、視頻和動畫等新興多媒體元素，增加了網頁界面生動性的同時也使得網頁設計者需要考慮更多頁面元素合理性運用。
1.文字
從網頁最初的純文字界面發展至今，文字元素作為網站內容傳達的主體，文字有著其他任何元素無法取代的重要作用。首先是文字信息符合人類的閱讀習慣，其次因為文字所占存取空間小，節省了下載和瀏覽時間。網頁中的文字主要包括標題、信息、文字鏈接等形式。文字作為占據頁面重要比率的元素，同時又是信息重要載體，它的大小、字體、顏色和排布對頁面整體設計影響極大。以文字排布為主的網頁界面，只要文字排布得當，版面同樣可以生動活潑，分類條例清晰，不會給人單調感覺。
2圖形
在大多數網頁中，圖形占據了重要的位置，有的甚至是全部頁面。圖形往往能引起人們的注意，并激發閱讀興趣，合理的運用圖形，可以生動直觀、形象地表現設計主題。網頁中常用的圖形格式包括JPG、GIF和BMW。圖形元素包括標題、背景、主圖、鏈接圖標四種。以圖像作為標題和鏈接可以使網頁具有更好的視覺效果，配合文字增強生動和形象性。主圖與背景在裝飾性上小有不同，背景是襯托主題，主圖則是突出表現主題。主圖是整個網頁的視覺中心，它具有直觀性強的特點，可以為單調的文字信息增強活力，不需要像文字那樣去逐句閱讀，可以不受文化水平的限制，能給人強烈的視覺信息。
3多媒體
隨著網絡硬件設備的日益完善，網頁構成中的多媒體元素運用的也越來越多，主要包括音頻、視頻和動畫。這些是界面構成中最吸引人的元素，好的多媒體元素不但可以增加網站的活力還可以有效的提高網站
與瀏覽者之間的互動交流。
二、網站界面布局
網頁設計源于平面設計但又與平面設計有所區別不同，相同的是在設計中多運用平面構成的基本原理，不同的是它的大小比較固定，傳載的媒體只限于電子顯示器(包括手機、PDA等)，這樣就為設計者
提出了更為苛刻的要求。
(一)頁面尺寸
由于網頁的瀏覽多是基于顯示器實現的，所以顯示器的分辨率就決定了網頁設計者設計網站頁面的大
小，目前比較流行的顯示器的尺寸為
800*600、1024*76
8、1125*86
4、1280*720、1280*76
8、1280*960、1280*1024
而目前主流設計網站頁面的大小一般為
600*300、760*420、995*436
有效可視區域(單位：px) 一
屏幕
800 IE6.0 779(+21) 779(+21) 783(+17) Opera9.0 781(+19)
39) 83)
461(+
119)
48)
417(+1
17)
1005(+
39)
68)
452(+1
21)
1007(+
83)
629(+1
19)
600 432(+1
21)
1003(+
48)
585(+1
17)
1261(+
9)
1024 1003(+
68)
620(+1
21)
1263(+
3)
885(+1
3768 600(+1
21)
1259(+
8)
841(+18
1280 1259(+
8)
876(+141024 856(+16
二
三
IE7.0 Firefox2.0 一般情況下寬度是一定的但頁面的寬度則可以根據內容的多少而進行調整，但設計寬度始終要比顯示器的實際大小窄20像素，這為的是給右側的滾動條留有一定的空間(見圖1)
(圖例1)
1. 最保守而最有兼容性的一屏大小是：779×432
2. 最廣泛的一屏大小是：1003×600 3. 適合目前國內的情況，一屏大小是779×600
(二)視覺順序
網頁是通過視覺元素的引人注目而實現信息內容的傳達，為了使網頁獲得最大的視覺傳達功能，使網絡真正成為可讀強性而且新穎的媒體，網頁的設計必須適應人們視覺流向的心理和生理的特點，由此確定各種視覺構成元素之間的關系和秩序。因此，設計時應該研究各種視覺造型元素之間的距離、位置、面積和視
覺流程的問題。
視覺流程的形成是由人類的視覺特性所決定的。因為人眼晶體結構的生理構造，只能產生一個焦點，而不能同時把視線停留在兩處或兩處以上的地方。人們在閱讀一種信息時，視覺總有一種自然的流動習慣，先看什么，后看什么，再看什么。視覺流程往往會體現出比較明顯的方向感，它無形中形成一種脈絡，似乎有一條線、一股氣貫穿其中，使整個版面的運動趨勢有一個主旋律。心理學的研究表明，在一個平面上，上半部讓人輕松和自在，下半部則讓人穩定和壓抑。同樣，平面的左半部讓人輕松和自在，右半部讓人穩定和壓抑。所以平面的視覺影響力上方強于下方，左側強于右側。這樣平面的上部和中上部被稱為“最佳視域”，
也就是最優選的地方。
在網頁設計中一些突出的信息，如主標題、每天更新的內容等通常都放在這個位置。當然視覺流程是一種感覺而非確切的數學公式，只要符合人們認識過程的心理順序和思維發展的邏輯順序，就可以更為靈活地運用。在網頁設計中，靈活而合理地運用視覺流程和最佳視域，組織好自然流暢的視覺導向，直接影響到傳播者傳達信息的準確與有效性。所以在網頁的編輯設計中，視覺導向是一個要點，網頁的設計是一種創造，首先要立足信息的傳達，但又要符合人們較為普遍的思維習慣，做到視覺流程自然、合理、暢快。成功的視覺流程安排，能使網頁上的各種信息要素在一定空間內合理分布，能使頁面上各信息要素的位置、間隙、大
小保持一定的節奏感和美感。
(圖例2 視覺順序)
在布局設計中多使用平面的設計規律如“九分法”等 (見圖2)
(三)布局步驟
1. 草圖
這時設計師面對的是一張白紙，要做的就是簡單的用畫筆在紙上將創意的大致輪廓畫在紙上，以便給
以后的設計做大致的指導。
2. 粗略布局
將紙上的輪廓在電腦上體現出來，對畫面進行分割，也可以用色塊進行填充，確定好在什么地方布置
什么欄目，他們的大小等。(見圖例4)
(圖例4)
3. 將布局細化
將粗略的布局進行細化，使色彩，LOGO，導航條等實現，一般用的工具多為PHOTOSHOP和FIRE
WORKS(見圖例5)
(圖例5)
4. 點、線、面的運用
在網頁設計中同樣離不開平面設計中最基本的點、線、面的運用
4.1點的運用 在內容繁雜的網頁上為了可以讓瀏覽者更輕松的找到自己想要的信息，點的引導作用必不可少(見圖
5)
(見圖6)
4.2線的運用
線不但起到了頁面的分割作用，很好的運用線條還使網頁錦上添花(見圖7)
(圖例7)
5.布局的原則
屏幕布局因功能不同考慮的側重點不同。各功能區要重點突出，功能明顯。無論哪一種功能設計，其
屏幕布局都應遵循如下五項原則：
平衡原則。注意屏幕上下左右平衡。不要堆擠數據，過分擁擠的顯示也會產生視覺疲和接收錯誤。
預期原則。屏幕上所有對象，如窗口、按鈕、菜單等處理應一致化，使對象的動作可預期。
經濟原則。即在提供足夠的信息量的同時還要注意簡明，清昕。特別是媒體，要運用好媒體選擇
原則。
順序原則。對象顯示的順序應依需要排列。通常應最先出現對話，然后通過對話將系統分段實現。
規則化。畫面應對稱，顯示命令、對話及提示行在一個應用系統的設計中盡量統一規范。
三、 色彩在設計中的運用
(一)色彩的常識
最基本的有三種(紅，黃，藍)，其它的色彩都可以由這三種色彩調和而成。我們稱這三種色彩為“三原色”。 黑白灰屬于非彩色系列。其它的色彩都屬于彩色。任何一種彩色具備三個特征：明度、純度和
色相，其中非彩色只有明度屬性。
明度，也叫亮度指的是色彩的明暗程度的大小，明度越大，色彩越發亮。比如一些購物，兒童類網站。用的是一些鮮亮的顏色，讓人感覺絢麗多姿，生氣勃勃。明度越低，顏色越暗。主要用于一些游戲類網站，充滿神秘感;一些個人站長為了體現自身的個性，也可以運用一些暗色調來表達個人的一些孤僻，或者憂郁等性格。有明度差的色彩更容易調和。如紫色(#993399)跟黃色(#ffff00)，暗紅(#cc3300)跟草綠(#99cc00)，暗藍(#0066cc)跟橙色(#ff9933)等。
純度，指色彩的鮮艷程度，純度高的色彩純，鮮亮。兒童、動漫、時尚、購物等多用亮色調，給人以活潑、明朗、大方特點，純度底的色彩暗淡，含灰色。多用于藝術、科技等技術含量高的領域，給人以深遠、
穩重之感。
色相，指的是色彩的名稱。這是色彩最基本的特征，是一種色彩區別于另一種色彩的最主要的因素。比如說紅色，綠色，藍色等等都代表了不同的色相。同一色相的色彩，調整一下亮度，或者純度很容易搭配，
比如，深紅，暗暗，桃紅等。
暖色，暖色跟黑色調和可以達到很好的效果。暖色一般應用于購物類網站，電子商務網站，兒童類網站等等，用以體現商品的琳瑯滿目，兒童類網站的活潑，溫馨等等效果。
冷色，冷色一般跟白色調和可以達到一種很好的效果。冷色一般應用于一些高科技，游戲類網站，主要表達嚴肅，穩重等效果，綠色，藍色，藍紫色等等都屬于冷色系列。
相近色：色環中相鄰的三種顏色。相近色的搭配給人的視覺效果很舒適，很自然。所以相近色在網站
設計中極為常用。
互補色，色環中相對的兩種色彩。對互補色，調整一下補色的亮度，有時候是一種很好的搭配。
色彩均衡，網站讓人看上去舒適，協調，除了文字，圖片等內容的合理排版，色彩的均衡也是相當重要的一個部分。比如一個網站不可能單一的運用一種顏色，所以色彩的均衡問題是設計者必須要考慮的問題。色彩的均衡，包括色彩的位置，每種色彩所占的比例，面積等等。比如鮮艷明亮的色彩面積應小一點，讓人感覺舒適，不刺眼。這就是一種均衡的色彩搭配。
(二)色彩的運用
藍色是現代商務領域的流行色，也是最“安全”的WEB流行色。如果設計師對自己控制色彩的能力沒有太大把握，那么使用藍色是最好的選擇。藍色受設備偏色的影響最小。 紅色既可以象征著熱血、激情、沖動、勇氣與力量也可以象征恐怖與暴力，在主要由紅色構成的色彩中，有桃紅色的浪漫與溫馨，也有深紅色的穩健與深沉，由于紅色本身的亮度和飽和度都比較強，所以在與亮度和飽和度同樣比較強的冷色(如藍色綠色)相配時，中間最好能有一些過渡行的顏色。比如純紅與純藍搭配時可以在中間插入面積適中的白色，這樣一來，頁面中各視覺元素之間的沖突就不會那么強烈。 黃色是一種非常難以駕馭的顏色，同一種黃色與其他顏色搭配在不同的環境下表現出的視覺和心理效應往往會有很大差異，同樣的黃色既可以在某個環境中表現出熱情奔放的一面也可以在另一種環境中表現出
陰險狡詐的一面。
綠色由于自身很難與其他顏色搭配，所以是網頁設計中比較少用的顏色，在以綠色為主的優秀網頁設
計中大多會有橙色的參與。
橙色是朝陽的顏色也是柑橘的顏色，橙色象征著快樂、溫馨、時尚和動感。橙色有紅色熱情奔放的特點，但又不像紅色那么鮮艷和奪目;橙色有黃色敏快和爽朗的一面但又不像黃色那么容易產生平庸的感覺，大面積使用橙色的網頁，可以讓人感覺到撲面而來的溫暖與活力。另一方面，網頁設計師們越來越喜歡在白色、綠色、藍色、灰色、黑色的網頁中使用小巧而醒目的橙色元素，比如，橙色的小箭頭、小按鈕等元素，
這種設計可以非常有效的吸引瀏覽者的注意力。
紫色與紅色藍色在色調上有著近似的關系，與黃色、綠色、橙色等可以形成鮮明的對比，深紫色適于表現幽雅、神秘、憂郁等主題，淺紫色則適于表現浪漫溫馨等主題。
(三)確定網站的主題色
一個網站不可能單一的運用一種顏色，讓人感覺單調，乏味;但是也不可能將所有的顏色都運用到網站中，讓人感覺輕浮，花俏。一個網站必須有一種或兩種主題色，不至于讓客戶迷失方向，也不到于單調，乏味。所以確定網站的主題色也是設計者必須考慮的問題之一。
一個頁面盡量不要超過4種色彩，用太多的色彩讓人沒有方向，沒有側重。當主題色確定好以后，考慮其它配色時，一定要考慮其它配色與主題色的關系，要體現什么樣的效果。另外哪種因素占主要地位，
是明度，純度還是色相。
(四)色彩的搭配
在學習了解了色彩的一些基本概念及色彩的一些搭配問題，具體運用到網頁中，各要素的色彩又
是如何搭配的呢?
1、網頁標題
網頁標題是網站的指航標，瀏覽者要在網頁間跳轉，要了解網站的結構，網站的內容，都必須通過導航或者頁面中的一些小標題。所以我們可以使用稍微具有跳躍性的色彩，吸引瀏覽者的視線，讓他們感覺網站清晰、明了，層次分明。想往哪里走都不會迷失方向。
2、網頁鏈接
一個網站是由許多頁面組成的，實現網頁間相互跳轉的就是網頁的鏈接，所以文字與圖片的鏈接是網站中不可缺少的一部分。這里特別指出文字的鏈接，因為鏈接區別于文字，所以鏈接的顏色不能跟文字的顏色一樣。大多數瀏覽者不會花太多的時間用在尋找網站的鏈接上。設置了獨特的鏈接顏色，讓人感覺他的獨特性，自然而然好奇心必然趨使他移動鼠標，點擊鼠標。
3、網頁文字
多數網站都會運用背景顏色，這就要求設計者考慮到背景顏色的用色，以及前景文字的搭配等問題。一般的網站側重的是文字，所以背景可以選擇純度或者明度較低的色彩，文字用較為突出的亮色。讓人
一目了然。
4、網頁標志
網頁標志是宣傳網站最重要的部分之一，所以這兩個部分一定要在頁面上突迎而出。怎樣做到這一點呢?我們將LOGO和BANNER做的鮮亮一些，也就是色彩方面跟網頁的主題色分離開來。有時候為了
更突出，也可以使用與主題色相反的顏色。
5、網頁的留白
中國的書法講究留白，好的留白的運用可以帶給瀏覽者對畫面的聯想，更為重要的一點就是，在網站使用中瀏覽者通常會劃動鼠標來快速瀏覽頁面，如果沒有留白，瀏覽者很可能會誤點鏈接，給瀏覽帶來不便。
為了能讓自己的網頁設計得更靚麗、更舒適，為了增強你的頁面的可閱讀性，必須合理，恰當地
運用與搭配頁面各要素間的色彩!
綜上所述，我們了解到網站的界面不單單是美工設計那么簡單，它包括了心理學，生理學，平面構成，色彩構成等多方向的知識，只有了解并可以很好的運用這些知識，我們設計出的網站才能更好的為受眾服務。
第五篇：員工試用期自評總結-UI界面設計師試用期自評總結
員工試用期自評總結
轉眼間試用期已接近尾聲。首先感謝公司能給我展示才能、實現自身價值的機會，感謝領導和同事對我的關懷、支持和幫助。進入公司的三個月時間里，在領導和同事們的悉心關懷和指導協助下，和自身的不懈努力，使我在較短的時間內適應了公司的工作環境，也熟悉了公司的工作流程，現在基本能完成各項分配到的工作;同時讓我體會到了同事的團結向上的精神以及和睦大家庭的感覺。對公司文化有了更深的了解，看到公司的發展，我深深地感到驕傲和自豪，也更加迫切的希望以一名正式員工的身份在這里工作。
我于**年**月**日成為公司的試用員工，安排在技術研發中心擔任UI界面設計一職，現將我的工作情況分為三個階段來總結如下匯報：
一、萌芽階段
記得初次應聘時，我對公司的認識僅僅局限于****行業之一，對UI設計師一職的認識也局限于從事相對單純的界面的設計創意和美術執行工作。除此之外，便一無所知了。所以，試用期中如何去認識、了解并熟悉自己所從事的行業，便成了我的當務之急。
初到公司時，交到我手里的第一份工作就是”*****”***的修改，然而說來慚愧的是，因為對于整個項目的不熟悉，導致來回做了三個版本的修改設計，然而反復的修改和等待同事意見的回復對我來說，既新鮮也處處存在挑戰。不懂就學，是一切進步取得的前提和基礎。在這段時間里我認真學習和認識了公司相關資料，并且對公司以前的、現在的相關的項目的界面設計和業務情況都有了比較初步的了解，(這里特別的感謝我們的**、**、**、**，還有和我一樣新到公司不久的***，謝謝你們對我的幫助和關心)。再加上《新員工培訓》 、 《春季員工活動》和《****》的學習，以及日常工作積累使我對公司有了較為深刻的認識，也意識到了公司在***行業舉足輕重的地位，和他的發展對于推動整個***行業的發展有著巨大作用。同時，公司擁有比較好的管理體制和企業化標準運作的行政機構。這一切都讓我對公司的發展充滿了信心和憧憬。
二、成長階段
認真學習崗位職能，工作能力得到了一定的提高。
(一)根據崗位職責的要求，我的試用期主要工作內容是：
(1)負責公司各項軟件產品進行UI設計，包括網站頁面、客戶端人機交互以及應用程序界面;
(2)配合開發工程師進行軟件的框架、原型開發; (3)產品提出用戶界面和用戶體驗方面的合理建議 (4)負責完成領導分配下來的設計工作指令; (5)參與相關廣告創意的討論; (6)領導交辦的其他工作;
工作之余多看一些同行業界面設計和學習其他相關設計內容，讓自己更好的完成職內的設計，及時提交日工作匯總、工作周報、每周末總結匯總并提交下周計劃，及時總結自己的工作，更好完成界面設計工作。
(二)試用期的主要工作業績： (1) (2) (3) (4) (5) (6)
在工作中不斷的熟悉軟件業務流程和熟悉軟件產品、學習軟件界面設計、遇到問題，及時反饋，積極配合開發工程師進行軟件的框架的研發等，及時解決遇到的相關問題，能夠按時完成下發的任務。
(三)試用期中存在的問題：
(1)對于業務知識的掌握還不扎實;
(2)還需要學習其他模塊的知識，而不是僅僅局限在自己的模塊;
(四)工作改進建議
(1)在平時多參加公司組織的培訓，補充自己在其他模塊的不足; (2)多和同事溝通，分享工作經驗，了解自己工作的不足，取長補短;
三、成熟階段
進入公司以后，我得到了領導和同事在工作上和生活上的全方位關懷，免除了在外地工作的后顧之憂。在領導同事們的關懷與培養下，我認真學習、努力工作，積極的完成領導交付的工作。同時，我也注重自身發展和進步，不斷的學習新知識、新技能，提高自己的綜合素質。但我也存在許多的缺點和不足：在日常工作中有時考慮不周全，對工作的預見性和創造性不夠，但這些缺點和不足，在以后的工作中，我會多多向我的領導和同事學習的，逐漸的改掉這些缺點，注重鍛煉自己的口才交際、應變、創造組織能力，不斷在工作中學習、進取、完善自己。
在此，我想借此機會，正式向公司領導提出轉正申請，希望公司領導能對我的工作態度，能力和表現，以正式員工的要求做一個全面的考量。同時也非常的感謝公司的領導對我、的信任和支持。 在以后的工作中我會與人為善，對工作力求完美，不斷的提升自己的專業水平及綜合素質，以期為公司的發展盡自己的一份力量。
此致
敬禮
申請人：** **年*月*日