第一篇：qt作業(yè)：設計簡單的UI界面

qt第二次作業(yè)：

1．通過qt designer設計界面如下：

2.通過槽函數(shù)實現(xiàn)功能，主要代碼如下： 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中的函數(shù)實現(xiàn)：

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);} 實現(xiàn)結果：

1.三個用戶之間切換：

2.文字輸入：

3.按鈕A的切換：

4.字體實現(xiàn):

5.側邊欄隱藏：

6.添加備注：因為我用listwidget顯示信息，直接將備注空白欄設為editable即可：

第二篇：用戶界面UI設計大作業(yè)要求

用戶界面UI設計大作業(yè)要求

一、題目要求

1、每人為班級設計一個網(wǎng)站首頁。

2、如果出現(xiàn)兩人雷同，兩人都以“0分”計算。

3、首頁以psd格式保存。

4、將自己設計的班級首頁轉成html網(wǎng)頁文件保存。

5、完成大作業(yè)報告并打印。

說明：最后上交的內(nèi)容有“.psd”的原圖、“.jpg”的效果圖、“.html”的網(wǎng)頁文件、“.doc”的電子版大作業(yè)報告以及打印好的大作業(yè)報告。

二、網(wǎng)站首頁設計要求

1、首頁中要包含班級的logo。（logo自己設計）

2、首頁中要包含班級的名稱。

3、首頁中要包含導航欄。（導航的個數(shù)最少5個）

4、首頁中要包含自己制作的按鈕和處理的圖片。

5、首頁中要包含版權。（制作人名稱、班級）

6、首頁的顏色要和諧美觀。

7、首頁的布局要清晰合理。

三、大作業(yè)報告格式的要求

1、使用統(tǒng)一的封皮。

2、使用B5紙打印。

3、報告中主要寫制作過程，類似書上每章的實例制作步驟。

4、報告中文字要求，字體“宋體”、字號“小四”。

5、報告中每行文字之間的行間距為“1.5倍行間距”。

6、報告中每段文字前后段間距都為“0”。

7、報告中的每張?zhí)麍D都要有標號和名稱，格式為“宋體、小五”，段前段后都是“0.5倍行間距”。

8、報告中的貼圖大小都調(diào)整到“高度6厘米，寬度8厘米”。

9、報告中不要出現(xiàn)大段空白。

10、報告中除封皮以外，都要有頁碼。

四、大作業(yè)報告內(nèi)容要求

大作業(yè)報告中要涵蓋三方面的內(nèi)容，如下所示：

1、設計說明

主要敘述，顏色的選取以及頁面的布局情況。

2、制作步驟

1）背景的制作

2）logo的制作

3）導航的制作

4）其他板塊的制作

5）結果圖

3、總結

第三篇：UI設計規(guī)范（流程、界面）

UI設計(流程/界面)規(guī)范

一：UI設計基本概念與流程

1.1

目的規(guī)范公司UI設計流程，使UI設計師參與到產(chǎn)品設計整個環(huán)節(jié)中來，對產(chǎn)品的易用性進行全流程負責，使UI設計的流程規(guī)范化，保證UI設計流程的可操作性。

1.2范圍

l

界面設計

l

此文檔用于界面設計,本文檔的讀者對象是項目管理人員、售前服務人員、UI界面設計人員、界面評審人員和配置測試人員。

1.3

概述

UI設計包括交互設計，用戶研究，與界面設計三個部分?；谶@三部分的UI設計流程是從一個產(chǎn)品立項開始，UI設計師就應根據(jù)流程規(guī)范，參與需求階段、分析設計階段、調(diào)研驗證階段、方案改進階段、用戶驗證反饋階段等環(huán)節(jié)，履行相應的崗位職責。UI設計師應全面負責產(chǎn)品以用戶體驗為中心的UI設計，并根據(jù)客戶（市場）要求不斷提升產(chǎn)品可用性。本規(guī)范明確規(guī)定了UI設計在各個環(huán)節(jié)的職責和要求，以保證每個環(huán)節(jié)的工作質量。

1.4

基本介紹

A、需求階段

軟件產(chǎn)品依然屬于工業(yè)產(chǎn)品的范疇。依然離不開3W的考慮（Who,where,why.）也就是使用者，使用環(huán)境，使用方式的需求分析。所以在設計一個軟件產(chǎn)品之前我們應該明確什么人用(用戶的年齡，性別，愛好，收入，教育程度等)。什么地方用（在辦公室/家庭/廠房車間/公共場所）。如何用（鼠標鍵盤/遙控器/觸摸屏）。上面的任何一個元素改變結果都會有相應的改變。

除此之外在需求階段同類競爭產(chǎn)品也是我們必須了解的。同類產(chǎn)品比我們提前問世，我們要比他作的更好才有存在的價值。那么單純的從界面美學考慮說哪個好哪個不好是沒有一個很客觀的評價標準的。我們只能說哪個更合適，更合適于我們的最終用戶的就是最好的。

B、分析設計階段

通過分析上面的需求，我們進入設計階段。也就是方案形成階段。我們設計出幾套不同風格的界面用于被選。

C、調(diào)研驗證階段

幾套風格必須保證在同等的設計制作水平上，不能明顯看出差異，這樣才能得到用戶客觀真實的反饋。

測試階段開始前我們應該對測試的具體細節(jié)進行清楚的分析描述。

調(diào)研階段需要從以下幾個問題出發(fā)：

用戶對各套方案的第一印象

用戶對各套方案的綜合印象

用戶對各套方案的單獨評價

選出最喜歡的選出其次喜歡的對各方案的色彩，文字，圖形等分別打分。

結論出來以后請所有用戶說出最受歡迎方案的優(yōu)缺點。

所有這些都需要用圖形表達出來，直觀科學。

D、方案改進階段

經(jīng)過用戶調(diào)研，我們得到目標用戶最喜歡的方案。而且了解到用戶為什么喜歡，還有什么遺憾等，這樣我們就可以進行下一步修改了。這時候我們可以把精力投入到一個方案上，將方案做到細致精美。

E、用戶驗證階段

改正以后的方案，我們可以將他推向市場。但是設計并沒有結束。我們還需要用戶反饋，好的設計師應該在產(chǎn)品上市以后去站柜臺。零距離接觸最終用戶，看看用戶真正使用時的感想。為以后的升級版本積累經(jīng)驗資料。

經(jīng)過上面設計過程的描述，大家可以清楚的發(fā)現(xiàn)，界面UI設計是一個非常科學的推導公式，他有設計師對藝術的理解感悟，但絕對不是僅僅表現(xiàn)設計師個人的繪畫。所以我們一再強調(diào)這個工作過程是設計過程。UI界面設計不存在美工。

2.UI設計流程

2.1

概述

根據(jù)上述原則，分析公司產(chǎn)品的特點，制定符合軟件產(chǎn)品（或項目）生命周期的UI設計流程。每個產(chǎn)品（或項目）的生命周期中，UI設計師應該嚴格按照流程，完成每個環(huán)節(jié)的職責，確保流程準確有效的得到執(zhí)行，從而提高產(chǎn)品的可用性，提升產(chǎn)品質量。

二：UI界面用戶體驗設計原則與規(guī)范

1：應該遵循的基本原則

無論是控件使用，提示信息措辭，還是顏色、窗口布局風格，遵循統(tǒng)一的標準，做到真正的一致。

這樣得到的好處：

1：使用戶使用起來能夠建立起精確的心里模型，使用熟練了一個界面后，切換到另外一個界面能夠很輕松的推測出各種功能，語句理解也不需要費神理解

2：降低培訓、支持成本，支持人員不會行費力逐個指導。

3：給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加

做法：

項目組有經(jīng)驗人士，確立UI規(guī)范：

美工提供色調(diào)配色方案，提供整體配色表

界面控制程序人員、用戶體驗人員提出合理統(tǒng)一使用的控件庫。參考標準界面使用規(guī)范：

控件功能遵循行業(yè)標準，windows平臺參見《Microsoft

用戶體驗》

控件樣式在允許的范圍內(nèi)可以統(tǒng)一修改其樣式、色調(diào)

參考其他軟件先進操作，提取對本項目有用的功能，以使用，絕對不能盲從，漫無目的。

根據(jù)需要，設計特殊操作控件，準則為：簡化操作、達到一定功能目的界面實施人員與美工商榷控件可實現(xiàn)性,(如不實行此步驟，將會導致各自對對方工作不滿意，也會產(chǎn)生不一致的混亂)。重復疊代上述工作。

建立合理化文檔《UI標準》描述上述規(guī)范，強行界面設計者理解之，并作為開發(fā)準則，SQA人員進行監(jiān)控開發(fā)人員是否遵循，及時告誡開發(fā)人員。

2：(Color)顏色使用恰當，遵循對比原則：

1：統(tǒng)一色調(diào)，針對軟件類型以及用戶工作環(huán)境選擇恰當色調(diào)：

如：安全軟件，根據(jù)工業(yè)標準，可以選取黃色，綠色體現(xiàn)環(huán)保，藍色表現(xiàn)時尚、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等

2：如果沒有自己的系列界面，采用標準界面則可以少考慮此方面，做到與操作系統(tǒng)統(tǒng)一，讀取系統(tǒng)標準色表

3：色盲、色弱用戶，即使使用了特殊顏色表示重點或者特別的東西，也應該使用特殊指示符，?quot;!，?著重號，以及圖標等

4：顏色方案也需要測試，常常由于顯示器、顯卡的問題，色彩表現(xiàn)每臺機器都不一樣，應該經(jīng)過嚴格測試，不同機器進行顏色測試

5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍色沒有足夠反差，而藍色和白色反差很大。除非特殊場合，杜絕使用對比強烈，讓人產(chǎn)生憎惡感的顏色。

6：整個界面色彩盡量少的使用類別不同的顏色

itop色表

具體標準參考美術學統(tǒng)計學術標準。

色表的建設，對于美工在圖案設計、包裝設計上起著標準參考作用，對于程序界面設計人員設計控件、窗體調(diào)色起到有章可循的作用。

3：(Resource)資源

一個多姿多彩的人機交互界面，少不了精美的鼠標光標、圖標以及指示圖片、底圖等。

1：也需要遵循統(tǒng)一的規(guī)則，包括上述顏色表的建立，圖標的建立步驟也應該盡可能的形成標準，參考itop的outlookbar圖標設計標準

2：有標準的圖標風格設計，有統(tǒng)一的構圖布局，有統(tǒng)一的色調(diào)、對比度、色階，以及圖片風格

3：底圖應該融于底圖，使用淺色,低對比，盡量少的使用顏色。

4：圖標、圖像應該很清晰的表達出意思，遵循常用標準，或者用戶機器容易聯(lián)想的到物件，絕對不允許畫出莫名奇妙的圖案。

5：鼠標光標樣式統(tǒng)一，盡量使用系統(tǒng)標準，杜絕出現(xiàn)重復的情況，例如某些軟件中一個手的形狀就有4鐘不同的樣子。

4：(Font)字體

使用統(tǒng)一字體，字體標準的選擇依據(jù)操作系統(tǒng)類型決定。

中文采用標準字體，“宋體”，英文采用標準

Microsoft

Sans

Serif

不考慮特殊字體(隸書、草書等,特殊情況可以使用圖片取代),保證每個用戶使用起來顯示都很正常。

字體大小根據(jù)系統(tǒng)標準字體來，例如

MSS字體8磅，宋體的小五號字(9磅）五號字（10.5磅)。

所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強顯示等例外情況

ITop采用BCB，所有控件默認使用

parent

font，不允許修改，這樣有利于統(tǒng)一調(diào)整。

·系統(tǒng)大小字體屬性改變的處理。

Windows系統(tǒng)有個桌面設置，設置大字體屬性，很多界面設計者常常為這個惱火，如果設計時遵循微軟的標準，全部使用相對大小作為控件的大小設置，當切換大小字體的時候，相對不會有什么特殊問題。

但是由于常常方便使用點陣作為窗口設計單位，導致改變大字體后，出現(xiàn)版面混亂的問題。

這個情況下，應該做相應處理：

1：寫程序自動調(diào)節(jié)大小，點陣值乘以一個相應比例

2：全部采用點陣作為單位，不理會系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體帶來的麻煩。BCB/DELPHI中多采用這種方法，但是必然結果是和系統(tǒng)不統(tǒng)一。

5：(Text)文字表達

提示信息、幫助文檔文字表達遵循以下準則：

1：口語化、客氣、多用您、請，不要用或少用專業(yè)術語，杜絕錯別字

2：斷句逗號句號頓號分號的用法，提示信息比較多的話，應該分段，3：警告、信息、錯誤

使用對應的表示方法

4：使用統(tǒng)一的語言描述，例如一個關閉功能按鈕，可以描述為退出、返回、關閉，則應該統(tǒng)一規(guī)定。

5:

根據(jù)用戶不同采用相應的詞語語氣語調(diào)，如專用軟件，可以出現(xiàn)很多專業(yè)屬于，用戶為兒童：這可以語氣親切和藹，老年用戶則應該成熟穩(wěn)重。制定標準遵循之。

6：(STYLE)控件風格，不要使用錯誤控件，控件功能要專一

有設計好的同一風格的控件，如果沒有能力設計出一套控件，則使用標準控件，絕對不能不倫不類，雜亂無章

·不要錯誤使用控件，例如：

使用Button樣式做TTable的功能，拿主菜單條顯示版權信息，·統(tǒng)一類型的控件操作方式相同，例如一個控件雙擊可以執(zhí)行某些動作，而同樣控件，雙擊卻沒有任何反映

·一個控件只做單一功能，不復用

很多人為了寫程序方便，喜歡把一個控件在不同情況下做不同功能用，這些對用戶初次理解增加難度，只有用戶熟悉后才能理解。

例如

改變紅色選項，左邊的參數(shù)代表不同的設置，可能由于為了節(jié)省控件或者編程量，但是只有熟練用戶才回使用，這種情況下解決方法：

1:分組，使用雙份控件

2：使用TABLE頁，給用戶很明顯的視覺變化

==========================================================================

總結起來就是：

1.產(chǎn)品制作人，寫產(chǎn)品計劃書。

2.用戶體驗研究員，作調(diào)查分析。

3.信息建構師，設計產(chǎn)品架構。

4.互動設計師，作出互動流程。

5.視覺設計師和用戶界面設計師，作出頁面視覺設計。

6.前臺工程師，前臺開發(fā)。

7.后臺工程師，后臺開發(fā)。

8.用戶體驗研究員，做用戶測試確保質量。

1.確認目標用戶

在軟件設計過程中，需求設計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標用戶的不同引起的交互設計重點的不同。例如：對于科學用戶和對于電腦入門用戶的設計重點就不同。

2.設計目標一致

軟件中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設計目標需要一致。例如：如果以電腦操作初級用戶作為目標用戶，以簡化界面邏輯為設計目標，那么該目標需要貫徹軟件（軟件包）整體，而不是局部。

3.元素外觀一致

交互元素的外觀往往影響用戶的交互效果。同一個（類）軟件采用一致風格的外觀，對于保持用戶焦點，改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標用戶進行調(diào)查取得反饋。

7.可用性原則

7.1可理解

軟件要為用戶使用，用戶必須可以理解軟件各元素對應的功能。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應的功能。例如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認刪除操作，用戶可以更加詳細的理解該元素對應的功能，同時可以取消該操作。

7.2可達到

用戶是交互的中心，交互元素對應用戶需要的功能。因此交互元素必須可以被用戶控制。用戶可以用諸如鍵盤、鼠標之類的交互設備通過移動和觸發(fā)已有的交互元素達到其它在此之前不可見或者不可交互的交互元素。要注意的是交互的次數(shù)會影響可達到的效果。當一個功能被深深隱藏（一般來說超過4層）那么用戶達到該元素的幾率就大大降低了?？蛇_到的效果也同界面設計有關。過于復雜的界面會影響可達到的效果。（參考簡單導向原則）

Quote

[階段一：分析]

1、用戶需求分析

2、用戶交互場景分析

3、競爭產(chǎn)品分析這兩者可以說是相輔相成的。

對于一個較為正規(guī)的項目而言，必然有對用戶需求的分析內(nèi)容。其中用戶UI需求是重要的組成部分。如果說UI設計原則是所有UI設計的出發(fā)點的話，那么用戶UI需求就是本次設計的出發(fā)點。好的UI設計建立在對用戶深刻了解之上。因此用戶交互場景分析就很重要。對于大部分項目組來說也許沒有時間和精力去實際勘查用戶的現(xiàn)有交互、制作完善的交互模型考察，但是UI設計人員在分析的時候一定要站在用戶角度思考：如果我是用戶，這里我會需要什么。競爭產(chǎn)品能夠上市并且被UI設計者知道，必然有其長處。這就是所謂三人行必有我?guī)煹囊馑?。每個設計者的思維都有局限性，看到別人的設計會有觸類旁通的好處。當然有的時候可以參考的并不一定是競爭產(chǎn)品。

[階段二：設計]

采用面向場景、面向事件驅動和面向對象的設計方法。

UI設計著重于交互，因此必然要對最終用戶的交互場景進行設計。軟件是交互產(chǎn)品，用戶所作的就是對軟件事件的響應以及觸發(fā)軟件內(nèi)置的事件。因此要面向事件設計?，F(xiàn)在的程序開發(fā)主流采用的是面向對象設計。面向對象設計可以有效的體現(xiàn)面向場景和面向事件的特點。設計的四個要素：交互對象,數(shù)據(jù)對象,事件（交互事件和異常）,動作

[階段三：開發(fā)]

通過：用戶交互case圖（說明用戶和系統(tǒng)之間的聯(lián)系）用戶交互流程圖（說明交互和事件之間的聯(lián)系）交互功能設計圖（說明功能和交互的對應關系）

最終得到UI的設計產(chǎn)品。

[階段四：驗證]

正如UI交互設計原則探討文中提到的，對于UI產(chǎn)品的驗證主要從下面幾個方面入手：

1、功能性對照UI設計的再好，和需求不一致也不可以。

2、實用性內(nèi)部測試UI設計的最重要點就是實用性。

3、用戶焦點小組UI設計是否優(yōu)秀的重要衡量依據(jù)。最后，說一點其他的問題?，F(xiàn)在往往認為交互式設計和最終的UI效果設計可以截然分開。這就好比說需求可以和設計截然分開，是不可能的。

Quote

UI設計流程以及設計師參與的環(huán)節(jié)

最近的工作中總結出一條結論：擁有一個完善規(guī)范的流程，是決定著一個項目走向成功或失敗的關鍵。

對于UI設計的工作流程，我覺得可以根據(jù)“市場分析－用戶分析－架構－原型－界面－輸出－完善”這條主線制定，每個環(huán)節(jié)UI設計師都應參與其中。

1.產(chǎn)品定位與市場分析

這一類工作大多都是由新產(chǎn)品研發(fā)部門以及市場需求完成的，但UI設計師應了解產(chǎn)品的市場定位、產(chǎn)品定義、客戶群體、運營方式等。

2.用戶研究與分析

這個過程是非常重要的，設計師應該找到合適的方法來完成此環(huán)節(jié)。你可以搜集相關資料分析目標用戶的使用特征、情感、習慣、心里、需求等，提出用戶研究報告和可用性設計建議。這部分工作也可和團隊配合完成。時間與項目需求允許的情況下，更可以制定實景用戶分析。

3.架構設計

這里涉及到比較多的界面交互與流程的設計，根據(jù)可用性分析結果制定交互方式、操作與跳轉流程、結構、布局、信息和其他元素。

4.原型設計

我覺得這里應該是一個小的階段標志，要對前面所有工作加以設計方面的實施，根據(jù)進度與成本，可以把原型控制在“手繪－圖形－FLASH-視頻”幾個質量范圍。原型的本質更傾向與一個DEMO，它不需要有全部的功能，但要體現(xiàn)出設計對象的基本特性。

5.界面設計

如果很傾向于圖形界面設計，這兒是你最喜歡的部分。但一定要結合循環(huán)討論過的分析結果做設計，否則你的作品很難被人信服。色調(diào)、風格、界面、窗口、圖標、皮膚的表現(xiàn)是本環(huán)節(jié)的關鍵。

6.界面輸出

作為設計師，在這一部分的工作就是配合好開發(fā)人員完成相關的界面結合。

7.完善工作

這個環(huán)節(jié)是很多部門共同參與的，包括可用性的循環(huán)研究、用戶體驗回饋、測試回饋。同時，UI人員也應該把一些可行性建議進行完善。很多設計師做了東西不喜歡改，這是一個大忌。

如上的流程，可能會有很多部門共同參與完成，UI設計師如何與團隊配合并發(fā)揮自己應有的作用非常重要。一名合格的UI設計師，應該能貫穿整個UI流程進行工作，而并非是單純的圖形界面設計。

第四篇：材料設計在UI界面中的體現(xiàn)

本科畢業(yè)論文（設計）

題 目：探析材料設計在UI界面中的體現(xiàn)

學 生： 王夢琦 學號： 201106010224

系 別： 設計藝術系 專業(yè)： 藝術設計 入學時間： 2011 年 9 月 13 指導教師： 王淼 職稱： 講師 完成日期： 2015 年 5 月 12 日

誠 信 承 諾

我謹在此承諾：本人所寫的畢業(yè)論文《探析材料設計在UI界面中的體現(xiàn)》均系本人獨立完成，沒有抄襲行為，凡涉及其他作者的觀點和材料，均作了注釋，若有不實，后果由本人承擔。

承諾人（簽名）：

年 月 日

探析材料設計在UI界面中的體現(xiàn)

姓名：王夢琦

學號：201106010224

指導老師：王淼

摘要：隨著UI設計的不斷發(fā)展，近期出現(xiàn)了一種新的界面設計方向，它就是材料設計。論文以材料設計在UI界面中的體現(xiàn)為題，分析了材料設計的藝術特征，認為材料設計不僅有豐富的視覺空間，還有統(tǒng)一的視覺動效。進而著重從界面風格、布局、圖標、按鈕四個方面，探討了材料設計在UI界面中的應用，為UI界面提供了新的設計思路，同時開拓了視覺設計視野。

關鍵詞：材料設計、UI界面、系統(tǒng)動效、界面風格

Theory of material design in the UI

Name:WangMengqi Student Number:201106010224

Advisor:WangMiao

Abstract: With the continuous development of UI design, recently there is a new interface design direction, it is the material design.Thesis topic, reflected in the UI interface design are analyzed the art features of material design, think material design not only has the rich visual space, and unified visual effect.And emphatically from the interface style, layout, ICONS, buttons, four aspects, this paper discusses the application of material design in the UI interface, for UI interface provides a new design idea, develop the visual design view at the same time.Key word: Material design, UI interface, system dynamic effect, interface style

目 錄

引言

1.材料設計與UI界面 1.1材料設計的含義 1.2 UI界面的含義 2．材料設計的藝術特征 2.1豐富的視覺空間 2.1.1大膽的色彩對比 2.1.2鮮明的視覺層級 2.2統(tǒng)一的視覺動效 2.2.1卡片式漸變 2.2.2交互性設計

3.材料設計在UI界面中的應用 3.1材料設計在界面風格中的體現(xiàn) 3.2材料設計在界面布局中的體現(xiàn) 3.3材料設計在界面圖標中的體現(xiàn) 3.4材料設計在界面按鈕中的體現(xiàn) 結語 參考文獻

引 言

移動設備的崛起帶來了用戶界面設計的變革，材料設計是近期出現(xiàn)的一種新的界面設計方向。材料設計通過視覺空間和視覺動效來展現(xiàn)它的藝術魅力，其中的色彩搭配使得界面看起來非常的大膽，充滿色彩感，凸顯內(nèi)容。微妙的動畫、陰影也使得用戶與材料設計的互動更加有趣。在UI界面中，材料設計的界面風格和布局都有了很大的改變，在圖標和按鈕上也進行了改進，有很多令人愉悅的小細節(jié)，給用戶提供了一種新的體驗模式。材料設計不僅僅是一種視覺風格的轉變，而是一種設計語言和思維方式的演變，它將引領UI設計的潮流趨勢。1.材料設計與UI界面 1.1 材料設計

Google今年推出了新的移動設計方向“Material Design”，我把它翻譯成“材料設計”?！安牧稀笔欠N隱喻，即空間的合理化及系統(tǒng)動效的統(tǒng)一。2014年, 扁平化設計是最流行的UI設計趨勢，而它的“過于平”也引起了一番熱論，但材料設計在扁平化上作了微妙的漸變，層次感和動畫，保留了意義上的有形世界。所以，我們可以形象的理解材料設計是“向擬物回跳一下的扁平化設計”，但材料設計本身又是獨立的。

材料設計的中心思想，便是把物理世界的體驗帶進屏幕。將現(xiàn)實世界中紙張的特性挪到電子屏幕里，在“紙”上呈現(xiàn)信息內(nèi)容，給用戶一種貼近真實的體驗，讓整個界面看起來簡潔、直觀，讓人眼前一亮。當前，Android 7的WPS就是基于材料設計的全新設計，業(yè)內(nèi)專家表明:材料設計或將成為將來ＵＩ界面設計的趨向，這類設計理念讓安卓界面在體驗上更加新穎和簡潔。1.2 UI界面

UI的意思就是用戶界面，用一句話概括就是人和工具之間的界面。在我們生活中，界面同樣體現(xiàn)在某一些方面，比如看電視的時候遙控器和屏幕就相當于這個界面。它不僅僅是由用戶與界面兩個部分組成，同時還包含著用戶與界面之間的交互關系。

JefRaskin在《人本界面，交互式系統(tǒng)設計》一書中指出“就消費而言，界面就是產(chǎn)品。”在這里，界面包括產(chǎn)品外觀和產(chǎn)品的交互行為。一個美觀而不失實用的界面會給人帶來輕松舒適的視覺享受，它會吸引用戶去探索，去發(fā)現(xiàn)有趣之處，拉近人與電子設備之間的距離，讓用戶樂于使用。界面設計并不是僅僅為了美觀，他需要為用戶而設計，需要考慮用戶的使用環(huán)境與使用方式，它是考慮用戶主觀情感的科學性的藝術設計。2.材料設計的藝術特征

2.1 豐富的視覺空間 2.1.1 大膽的色彩對比

用戶第一次看到一個UI界面時，會對色彩留下最深刻的映象，因此色彩是UI界面設計中不可缺少的視覺元素。如圖1，材料設計崇尚多彩，但它并不使用那種很艷麗的顏色，大多采用清新靚麗的色彩，清爽的頁面通常都離不開白色背景的映襯。為過于艷麗讓人感覺到俗氣。

在材料設計中，界面一般采用不同的色調(diào)來區(qū)分各個欄目的主題，而部分細節(jié)的處理則喜歡用靚麗分明的色條或色塊。如圖2，工具欄大塊區(qū)域采用了藍色為主色，而狀態(tài)欄采用了比主色稍深的藍色。如圖

3、圖4用靚麗的色條來強調(diào)標題，同時強調(diào)色可被用來當做按鈕和控件或開關和滑塊。

2.1.2 鮮明的視覺層級

假如某篇文章的標題比內(nèi)容概述更重要，標題就應該有更多視覺主導力。主導元素是所敘述故事的起點，是用戶接觸設計的入口，能夠將用戶注意力第一時間吸引到設計師希望用戶注意的地方。為了最快的吸引用戶注意，可以通過對比、強調(diào)、圖5

圖6 圖 2

圖3

圖4 圖 1 同時將本來靚麗的色彩加入一點點的灰色，不但讓圖案變得生動起來，又不會因和相對的視覺重量建立主導地位元素。如圖5,是材料設計在Feedly閱讀器里的應用，圖中的主導元素是頂部的圖片，占據(jù)了最大的面積，深色圖片底下大面積白色區(qū)域與圖片形成對比，打造出鮮明的用戶界面，吸引用戶關注。圖片上的“Food”字樣可能是頁面最重要的信息，清晰闡述此頁面的主題。在一個設計中，首先突出主導元素，其次就應該強調(diào)焦點。如圖6，此頁面主導元素是人物圖片，與周圍的字體形成本質對比，而它的焦點是圖上加粗的黃色字體“GIRL”，旁邊 的播放按鈕也是焦點之一，從而構建出視覺層級、視覺意義以及視覺聚焦。2.2 統(tǒng)一的視覺動效 2.2.1 卡片式漸變

在材料設計上，動效的理念有著相通的原理。動效連接于整個應用的程序流程，表達了設計的先后關系，尤其是關于產(chǎn)品的連續(xù)性來講，用戶根本沒有中斷的感覺，在材料設計中，使用了漸變的方式讓界面流暢、舒適。UI界面的漸變是通過畫面基本形象有序地、漸進地變動而形成如夢如幻的、似音樂旋律般的視覺效果，這樣使畫面具有極強的觀賞性和秩序感。如圖7，在主頁瀏覽視圖里包含一列卡片，當你點擊一個卡片時，卡片將不再是一張卡片的大小，而是將延展到全屏幕。因此，“魔法紙片” 是材料設計中最重要的信息載體。紙片層疊、合并、分離，具有現(xiàn)實中的厚度、慣性和反饋，也具有液體的某些特性，可以自由伸展變形。如圖8，它同時運用了材料和動效，卡片就是所謂的材料，當用戶與其交互時，通過動效卡片延展來顯示更多內(nèi)容。這樣給用戶帶來的視覺效果是連續(xù)的，告訴用戶他們?nèi)绾问褂?，如何讓他們的操作影響到界面?/p>

2.2.2 交互性設計

動效的快速反饋，可以讓用戶感到信任和快樂。當用戶與應用交互時所反饋的動效不僅要實現(xiàn)美感，符合物理邏輯，而且能夠給用戶帶來樂趣。反饋動態(tài)效果的設計必須深思熟慮且具有針對性，而不能隨性設計，反饋動效應溫和，不讓用戶分心，鼓勵用戶進一步探索應用。

材料設計具備快速反饋動態(tài)效果的特性，它讓用戶充滿期待，觸摸、語言、鍵盤及鼠標是首要考慮的輸入模式。雖然UI元素是可見的，但是在物理上被限制在了設備屏幕之內(nèi)。視覺線索和動態(tài)效果可以為用戶和設備之間建立溝通的橋梁提供線索，讓用戶確認自己的輸入有用，繼而引導用戶操作。動效的加入，讓用戶與應用之間的溝通真實、有效，將應用帶到了新的高度。如圖9和圖10，是材料設計應用于Feedly閱讀器。在Feedly閱讀器中，最重要的轉場是打開文章和關閉文章。過程當中，用戶在文章的列表和文章內(nèi)容中切換。如圖9，當用 圖7

圖8

戶點擊文章預覽時，應用會出現(xiàn)點擊漣漪效應來提供即時反饋，然后整個效果會擴大充滿整個文章預覽元素。同樣，當用戶關閉文章時，這種效果也會在頂欄中出現(xiàn)。這是表面的反饋,漣漪效應使用戶知道他的操作有用，給予用戶帶入感，讓用戶的注意力不分散，同時感受到小趣味，繼而引導用戶進行下一步操作。當用戶在雜志視圖中預覽圖片時，點擊圖片后，文章會在轉場過程中逐漸放大，內(nèi)容會漸顯過來，而圖片會用漸隱來過渡，它們會

圖9 移動到相應的位置。有時在預覽圖中沒有出現(xiàn)在第一屏，然后在轉場時漸顯文章的內(nèi)容，縮略圖也漸隱來過渡。整個切換過程流暢、自然，不會讓用戶感到突兀，提高了用戶體驗的整體美感。如圖10，當用戶點擊了列表中的文章預覽區(qū)域時，模塊將會向上升起，形成屬于這篇文章的一個新的平面，考慮到視覺上的連續(xù)性，這個新平面會被放大，它成為最主要的一個面，同時文章的內(nèi)容也漸漸顯現(xiàn)出來。整個移動過程有意義、有秩序，引導著用戶的關注力，將最要的信息內(nèi)容傳遞給用戶。

3.材料設計在UI界面中的應用 3.1 材料設計在界面風格中的體現(xiàn)

圖10 視覺設計風格是指界面所具有的特有的氣質。后現(xiàn)代主義這種風格在UI界面的設計中占很大的比例，主要表現(xiàn)為波普風格和抽象風格。波普風格主要是以明朗亮眼的色彩、新奇的搭配圖案和強烈的色彩對比來刺激用戶的注意力。而抽象風格會給用戶帶來很大的聯(lián)想的空

圖11 間，通過點、線、色彩、面塊、形體、構圖來傳達。材料設計的界面風格總的來

說是“鮮明、形象、深思熟慮”的。如圖11，頁面運用了留白，移除了所有可有可無的元素，搜索框吸引了用戶全部的注意力，引導用戶去搜索。留白是抽象風格中常見的一個運用手法，它們的存在并不是單獨的，而是為了烘托主體元素，它們和主體元素是相互依托的關系。這樣給用戶一種簡潔、明了、清新的感覺。而在顏色選擇上材料設計的原則是“大膽、圖形化、有意義”，提倡一種主色，一種互補色，運用巧妙的色彩搭配、點、線、面塊等使得整個界面看起來非常大膽、充滿色彩感，凸顯內(nèi)容。如圖12，分別是具有波普風格的圖畫和材料設計的界面風格，從色彩上看，主要以紅、黃、藍三原色為主，色彩明快，色塊層次分明，讓人眼前一亮。而白色的適當點綴，又平衡了空間的色彩關系，給用戶一種舒適的感覺。從搭配的圖案上看，單色與拼接圖案的結合，充滿趣味，吸引用戶眼球的同時，也治愈了用戶的“審美疲勞”。

3.2 材料設計在界面布局中的體現(xiàn)

界面設計中的布局就是在有限的空間里對屏幕中的元素依據(jù)規(guī)律排列組合，而一個漂亮、易讀的排版離不開基本骨骼系統(tǒng)。骨骼設計系統(tǒng)在界面排版中要遵循一些基本原則，其中包括對齊原則、比例適度、留白、秩序美等。從圖13中可以看出，材料設計運用了“基線”對齊原則，同時利用骨骼線把文字、圖形、線條按照一定的比例整體組合，使整個界面具有清晰明了的視覺秩序美，讓用戶得以快速閱

圖13

圖12 讀信息，并有一種輕松、舒適的感覺。同時，視覺流程在界面布局中也尤為重要。當我們?yōu)g覽界面時，用戶首先會快速粗略地瀏覽頁面，大致形成第一印象，接著視線就會從最吸引注意力的一點開始依次瀏覽，最后完成信息的傳遞。這就是視覺流程。如圖14，用戶第一眼會看到鬧鐘，接著視線會移到右側，右側卡片利用線條的分割、視覺元素的排列，帶動用戶根據(jù)設計的引導流程進行有效的視覺交互和信息傳遞。在材料設計中，布局上注意文字以及圖片分量相當，在使用元素的同時注意元素在整個布局上面的呼應，在布局節(jié)奏感的把握上，注重疏密搭

配。界面的編排是為了突出主要信息為目標，讓用戶可以關注到重要的點，同時組織頁面的設計元素，合理引導視覺。如圖15，是材料設計對頁面的編排，它將構成要素進行了巧妙合理的安排，是整個界面具有層次感和條理性。其中恰如其分的采用余白，使文字更加突出，具有更強烈的視覺感染力，使畫面富有韻律。

3.3 材料設計在界面圖標中的體現(xiàn)

圖標是一種可視性很強的圖像語言。它相對于UI界面就好像公共系統(tǒng)中的標志，雖然它只是界面中一個極小的點，卻可以引導訪問者最方便、快捷的方式瀏覽和使用整個界面。圖標是具有標志意義的視覺符號，所以在材料設計中需要著重考慮圖標的視覺感覺和視覺沖擊力。如圖16，圖標具有很強的視覺表現(xiàn)力，有豐富的色彩和簡單明了的幾何圖形組成，線條分明，和諧的明暗關系使圖標立體起來，富有韻律感。同時色彩艷麗的圖形由白

圖16

圖14

圖15 色來襯托美麗，整體簡潔大方，但又不失活潑跳躍，提高了整個“顏值”。

UI界面圖標主要分為入口功能和操作功能，導航性圖標具有入口功能，它是UI界面的方向標志，它能指引用戶如何進入界面的不同區(qū)域，當你點擊它時，就會出現(xiàn)一個子頁面。如圖17。而操作命令圖標圖標具有操作功能，它所指示的內(nèi)容是各種交互功能、步驟等，界面工具條中包括的小圖標都屬于操作命令，它們可以幫助用戶實現(xiàn)一些操作，引導用戶去使用，如圖18。操作功能的圖標在完成點擊操作之后，通常會轉為對應的另一種形態(tài)。如“返回”與“菜單”，“收藏”與“已收藏”的狀態(tài)之間切換，這樣的設計里，在兩種狀態(tài)之間切換圖標經(jīng)常讓用戶感覺到生硬，而點擊圖標動畫后用戶會得到更佳強烈的反饋，使用戶感到有趣，并且讓界面生動，活潑起來。

圖17

圖18

3.4 材料設計在界面按鈕中的體現(xiàn)

按鈕能夠提示觀眾，引起用戶注意，好的按鈕設計可以將界面主題化、形象化、生動化，引導更多是用戶瀏覽頁面、接受信息的傳達。按鈕一般較小，往往采用與背景對比較強烈的色彩以引起注意，同時與整個界面協(xié)調(diào)。

浮動按鈕是材料設計中比較重要的一個體現(xiàn)，如圖18，浮動按鈕通過圓形元素與分割線、卡片、各種直線形成鮮明對比，并使用色彩設定中鮮艷的輔色，給用戶帶來更具突破性的視覺效果。浮動按鈕的大小分為默認大小和迷你兩種。當需要和屏幕上的其余元素產(chǎn)生視覺上的延續(xù)性時，一般使用迷你版的浮動按鈕。如圖19，Today是一款日歷應用程序，是材料設計應用于其中的一個應用，美麗的懸浮響應按鈕將日歷和日程分開，靈動的同時又不失使用，色彩鮮艷的按鈕，與背景顏色互補，吸引用戶的眼球并引導用戶去使用它。而且主題的顏色可以更改，用戶通過點擊相應的浮動按鈕根據(jù)自己的喜好更換背景的顏色，使其保持新鮮感，滿足個性化需求。

圖18

圖19

結 語

隨著UI設計的日益發(fā)展，設計的重點從僅僅關注平面的表現(xiàn)，轉移到了人與設計之間的交互。材料設計是對于這種潮流的適應，它的出現(xiàn)讓用戶眼前一跳。有設計師表明材料或將成為引領UI設計新的流行趨勢，會給用戶帶來更多驚喜的東西。

參考文獻

[1] 焦萬鵬.新興專業(yè)—“UI”設計初探[J].2007，8（2）：34-36.[2] Windy.什么是交互設計[J].2004，（11）：55-57.[3] 舒暢.淺析UI設計中的圖形語言[J].2009,（17）：50-50.[4] 聶璐.論網(wǎng)頁界面設計中的人性化因素[D].湖南師范大學.2010.[5] 李四達.交互設計的域與界.[J].裝飾.第201期2010.01.[6] 孫嬌、宗明明.網(wǎng)頁設計中視覺流程籌劃與應用.[J].2010,(7):169-171.[7] 程璐.網(wǎng)站的導航標—網(wǎng)頁界面圖標的設計研究.[J].2009,(2):182-182.[8] 汪大偉.現(xiàn)代主義風格的UI設計之興起.[J].現(xiàn)代裝飾.2012（09）：182-184.[9] 張濤.圖標認知因素分析及其應用研究.[D].2007年

[10] 張軍.網(wǎng)頁設計課程中關于UI設計教學的探索機會.[ J ].2009，（4）：84-86

第五篇：工作中常見的界面測試(UI測試)用例設計總結

大家在編寫測試用例時，往往分不清什么是UI，什么是功能。最近特意整理了工作中經(jīng)常進行的UI測試項。UI測試內(nèi)容包括以下內(nèi)容： 1.窗口測試主要測試內(nèi)容如下：

窗口與窗口之間的調(diào)用情況；

窗口尺寸變化時窗口中控件能否自適應；

多個窗口同時打開和調(diào)用的情況；

窗口拖動是否正常；

主窗口和子窗口調(diào)用能否正常處理；

窗口能否根據(jù)瀏覽器大小進行縮放【雙擊瀏覽器、瀏覽器最大化、最小化和還原查看窗口的變化情況】；

窗口顯示標題是否正確。

2.工具條測試主要測試內(nèi)容如下：

工具條能否正常顯示；

工具條能否隱藏；

可移動工具條在窗口中間位置其形狀是否正確；

工具欄上工具按鈕功能是否能正常實現(xiàn)；

工具按鈕顯示是否正確、友好、醒目易懂；

工具欄上的工具按鈕是否有鼠標懸停提示；

工具欄上的工具按鈕是否可以任意定制；

是否有輸入框；

是否有個人用工具條；

是否有網(wǎng)站型工具條；

是否有專項型工具條；

是否有企業(yè)型工具條。

3.工具條測試主要測試內(nèi)容如下：

輸入正常的字母或數(shù)字；

輸入已存在的文件的名稱；

輸入超長字符，例如在“名稱”框中輸入超過允許邊界個數(shù)的字符，假設最多255個字符，嘗試輸入 256個字符，檢查程序能否正確處理；

輸入默認值，空白，空格；

若只允許輸入字母，嘗試輸入數(shù)字；反之；嘗試輸入字母；

利用復制，粘貼等操作強制輸入程序不允許的輸入數(shù)據(jù)；

輸入特殊字符集，例如，NUL及n等；

輸入特殊字符集，例如，NUL及n等；

輸入不符合格式的數(shù)據(jù)，檢查程序是否正常校驗，如，程序要求輸入年月日格式為yy/mm/dd，實際輸入yyyy/mm/dd，程序應該給出錯誤提示；

輸入非法數(shù)據(jù)；

輸入默認值；

輸入特殊字符集；

輸入使緩沖區(qū)溢出的數(shù)據(jù)；

輸入相同的文件名；

輸入超過文本框長度的字符或文本，檢查所輸入的內(nèi)容是否正常顯示。4.菜單測試主要測試內(nèi)容如下：

菜單項是否符合需求，能否正常工作，是否與實際執(zhí)行的內(nèi)容一致；

菜單措辭是否準確；

菜單位置及順序是否合理；

菜單圖形布局是否一致；

下拉菜單是否根據(jù)選項含義進行分組；

菜單的熱鍵、快捷鍵能否有效使用和重復；

幫助菜單的“關于”中應有版權和產(chǎn)品信息；

界面菜單公司信息和產(chǎn)品信息顯示是否正確。5.頁面布局測試主要測試內(nèi)容如下：

頁面布局是否根據(jù)分辨率大小自動調(diào)整；

頁面長寬比例合理是否合適；

界面風格要一致；

背景色彩搭配要協(xié)調(diào)。6.圖標測試主要測試內(nèi)容如下：

是否符合表達習慣；

不同目標是否采用不同圖標；

圖標尺寸是否合適；

圖標是否有標注，包括公司圖標和產(chǎn)品圖標。7.界面按鈕測試主要測試內(nèi)容如下：

按鈕位置是否合適，是否有正常響應，是否有相應的匹配按鈕如：按鈕；

單選框和復選框按鈕的測試；

功能按鈕圖標上或在鼠標經(jīng)過時是否給予正確提示信息。8.時間控件測試主要測試內(nèi)容如下：

時間年月日選擇（開始時間不可大于結束時間）；

時間有效期；

時間年月日顯示是否正確；

時間查詢。

9.界面文字測試主要測試內(nèi)容如下：

界面文字描述是否準確，無異議；

文字大小是否合適（一般9-12號）；

是否出現(xiàn)中英文混合；

界面文字是否可根據(jù)瀏覽器的編碼方式自適應。10.界面信息提示測試主要測試內(nèi)容如下：

提示信息是否具有可理解性的語言描述；

對重要、具有破壞性的操作命令是否有確認信息；

提示信息是否具有統(tǒng)一的標記和標準；

提示信息不易過長。

11.鼠標和快捷鍵測試主要測試內(nèi)容如下：

是否支持滑輪；

鼠標點擊右鍵是否顯示菜單，取消右鍵是否隱藏；

無規(guī)則點動鼠標，查看界面的響應；

經(jīng)過鍵盤或鼠標復制粘貼；

支持快捷鍵使用；

支持鍵盤自動瀏覽按鈕（Tab鍵、Enter鍵）。

“確定”和“取消”當然在設計UI窗口測試用例時，要根據(jù)以上大的測試項，逐漸細分，盡可能多的設計較全面的測試用例，但是還要根據(jù)測試軟件的具體實現(xiàn)架構進行設計用例