第一篇：材料設計在UI界面中的體現

本科畢業論文（設計）

題 目：探析材料設計在UI界面中的體現

學 生： 王夢琦 學號： 201106010224

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

誠 信 承 諾

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

承諾人（簽名）：

年 月 日

探析材料設計在UI界面中的體現

姓名：王夢琦

學號：201106010224

指導老師：王淼

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

關鍵詞：材料設計、UI界面、系統動效、界面風格

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統一的視覺動效 2.2.1卡片式漸變 2.2.2交互性設計

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

引 言

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

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

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

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

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

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

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

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

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

2.1.2 鮮明的視覺層級

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

圖6 圖 2

圖3

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

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

2.2.2 交互性設計

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

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

圖8

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

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

3.材料設計在UI界面中的應用 3.1 材料設計在界面風格中的體現

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

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

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

3.2 材料設計在界面布局中的體現

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

圖13

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

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

3.3 材料設計在界面圖標中的體現

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

圖16

圖14

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

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

圖17

圖18

3.4 材料設計在界面按鈕中的體現

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

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

圖18

圖19

結 語

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

參考文獻

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

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

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

用戶界面UI設計大作業要求

一、題目要求

1、每人為班級設計一個網站首頁。

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

3、首頁以psd格式保存。

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

5、完成大作業報告并打印。

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

二、網站首頁設計要求

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

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

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

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

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

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

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

三、大作業報告格式的要求

1、使用統一的封皮。

2、使用B5紙打印。

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

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

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

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

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

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

9、報告中不要出現大段空白。

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

四、大作業報告內容要求

大作業報告中要涵蓋三方面的內容，如下所示：

1、設計說明

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

2、制作步驟

1）背景的制作

2）logo的制作

3）導航的制作

4）其他板塊的制作

5）結果圖

3、總結

第三篇：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設計基本概念與流程

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設計是一個非常科學的推導公式，他有設計師對藝術的理解感悟，但絕對不是僅僅表現設計師個人的繪畫。所以我們一再強調這個工作過程是設計過程。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設計著重于交互，因此必然要對最終用戶的交互場景進行設計。軟件是交互產品，用戶所作的就是對軟件事件的響應以及觸發軟件內置的事件。因此要面向事件設計。現在的程序開發主流采用的是面向對象設計。面向對象設計可以有效的體現面向場景和面向事件的特點。設計的四個要素：交互對象,數據對象,事件（交互事件和異常）,動作

[階段三：開發]

通過：用戶交互case圖（說明用戶和系統之間的聯系）用戶交互流程圖（說明交互和事件之間的聯系）交互功能設計圖（說明功能和交互的對應關系）

最終得到UI的設計產品。

[階段四：驗證]

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

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

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

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

Quote

UI設計流程以及設計師參與的環節

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

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

1.產品定位與市場分析

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

2.用戶研究與分析

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

3.架構設計

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

4.原型設計

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

5.界面設計

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

6.界面輸出

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

7.完善工作

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

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

第五篇：如何在教學設計中體現新課程理念

如何在教學設計中體現新課程理念

哈爾濱市阿城區朝鮮族中學校

南文鉉

以往的課堂教學設計只注重知識的傳授與學生學習的結果，對于學習的過程和學生能力的培養重視程度不夠，學生自然就形成了接受性學習的局面，形成以書本、以老師為準的思維定勢，不利于學生的全面發展。新課程理念下的教學設計應該改變以往的設計思路,充分體現以學生發展為本是新課程的重要理念，即堅持全體學生的全面發展、突出學生個性的健康發展、關注學生的終身可持續發展。新課程也明確提出教師應成為學生學習的組織者、引導者、合作者，是學生全面發展的促進者，要求我們老師講究課堂教學設計策略。

教學設計就是我們通常說的備課，是教師運用系統方法對各種課程資源進行有機整合、對教學過程中相互聯系的各個部分做出整體安排的一種構想，即為達到教學目標，對教什么、怎樣教，達到什么結果所進行的策劃。教學設計要在分析課程目標和教學任務、分析學生實際、分析教學環境與資源的基礎上，完成確定的教學目標、制定教學策略(包括教學程序的安排、教學方法的組合、教學組織形式的確定、教學媒體的選用等)、實施教學評價、編寫教學計劃等一系列的具體工作。教學設計是一項復雜的工作，因為教學設計的對象是人，其設計的主體也是人，而人是最為復雜的、最難以把握的，同時影響教學設計的因素也是復雜的。因此，教師需要有統攬全局的能力，將教學過程作為一個系統來進行設計，以促進學生全面、和諧發展為最高宗旨。

一、傳統教學設計中存在的問題

在傳統的課程觀中，課程內容規定著“教什么”，而教學則負責“怎樣教”，課程與教學的界線涇渭分明。課程內容由政府和學者專家制定，教師的職責是踏實而有效地傳遞課程內容，是課程的實施者，很少有機會發揮教學自主性，只能跟在課程計劃的后面亦步亦趨，扮演著“執行者”的角色。在這種課程觀的影響下，傳統的教學設計存在一定的問題是在所難免的，主要表現在：

1、重教材，輕學生

在傳統的教學中，教師教學的一個最大的特色是“教教科書”，教科書是依據教學大綱編寫的，在某種程度上具有一定的“權威性”，而且考試主要測試的是教科書上的知識，這導致掌握教科書的程度成了評價學生的惟一尺度。因此，教師進行教學設計主要依據教材與教參，力圖將教科書上的每一個知識點都納入自己的預想中。隨后，教師的教學過程便成了對“教案”的照本宣科，一堂課基本上是按教師的預想進行，當教學設計的環節完成后，一堂課的教學任務就算完成了，至于學生掌握了多少，掌握到了什么樣的程度，要到考試時看學生表達的效果如何才知道。因此，傳統的課堂教學總是缺少活力，一方面，教師的教學任務繁重，教師教得辛苦；另一方面，由于學生的學習體驗沒有得到應有的關注(即書本知識脫離了學生的生活世界)，在應試教育的價值取向下，他們必須去學習那些不想學、不愿意學的知識內容，學生也是學得很苦的，而且憑記憶學到的一些書本知識不能直接運用于實際，更是增添了教師與學生的負擔。2．重結論，輕過程

傳統的教學設計特別關注結論的記取，卻忽視了學生對知識的體驗過程，從教學的角度來講，教學的結論指教學所要達到的目的或所需要獲得的結果；教學的過程是指達到教學目標或獲得所需要結論而必須經歷的必要程序。傳統的教學設計受應試教育的影響，試圖走一條捷徑，將前人的知識經驗以最高的效率傳遞給學生，于是，教師習慣于將知識嚼爛后喂給學生，教師教給學生的是現成的結論、現成的方法、現成的說明，一切都是現成的，無需學生動手實踐就可以將知識快速地儲存于自己的大腦。這種教學設計剝奪了學生思考的權利，導致學生只會死記硬背，而缺少質疑的能力、創新的能力，這實際上是對學生智慧的扼殺與個性的摧殘。

二、新課程理念下的教學設計觀

現代課程觀與教學觀認為，課程與教學二者不是二元對立的關系，而是相互作用，有機整合的關系。對課程與教學的關系，美國學者塞勒等人做了很好的比喻：“課程是一幢建筑的設計圖紙；教學則是具體的施工。作為設計圖紙，會對如何施工做出非常具體的計劃和詳細的說明。這樣，教師便成了工匠，教學的好壞是根據實際施工設計圖紙之間的吻合程度，即達到設計圖紙的要求來測量的。”從這里看來，“教什么”在一定程度上決定著 “怎樣教”，但教學在課程面前還是能有所作為的，因為課程的實施依賴于教學，課程實施的程度取決于教學的水準。同時，新課程也明確提出了教師不僅是課程的實施者，而且也是課程的開發者的新觀念，另外，教師本身就是一種素材性課程資源和條件性課程資源的載體，這些優勢使教師在教學設計中更是大有作為。1．教學設計的系統觀

現代課程觀認為課程是一個系統，是教師、學生、教學媒介以及環境組成的一個有機系統。在這個系統中，這四個因素是相互作用、相互影響的，必須全面地考慮四個因素在系統中的作用，而不能只重視其中二個或三個。因此，教學設計其實就是對這個系統的設計，教師要用系統的觀點審視整個教學過程。由于教學設計要同時考慮到這四個因素，從而導致了教學設計更趨復雜。教師要從單純設計教學媒介(主要是教科書)轉向多維的立體設計，將設計的中心轉移到人的身上來。教師與學生是課程的有機組成部分并是相互作用的主體，教學過程是一個師生、生生“交往互動”的過程，以交往互動為特征的教學，要求教師與學生能有更多的溝通，在溝通中，教師與學生各自憑借自己的經驗，用各自獨特的表現方式，在教學過程中通過心靈的對接、意見的交流、思想的碰撞、合作的探討來實現知識的共同擁有與個性的全面發展。在教學設計系統觀的理念中，教學不再是教師 “一言堂”，教師與學生共同參與到教學中，成為一個“學習的共同體”。在教學設計時還要關注到“系統”中的物的因素，如學習材料的選擇、教學環境的控制等，因為這些客觀的因素同樣會影響到教學過程。教師要真正將教學過程作為一個動態、開放的系統來設計，從整體與部分、整體與環境之間的相互聯系、相互制約中選擇解決問題的最佳方案，以實現教學系統的整體優化。2．為學習設計教學

按照新課程的要求，教學設計應當引導學生習得自主、探究、合作的學習方式，教師也就要相應地對教材呈現方式、教學方式和師生互動方式進行改革，以促進學生的全面發展。但是，由于教學過程是一個動態、開放的系統，無論多完善的教學設計都會在課堂教學中不斷地變化、調整、豐富，都會在師生的交往互動中生成和發展出許多新問題、新認識和新成果，因為不僅學生，而且教師的心態總是隨著具體的教學情景發生變化，同時知識經驗的積累狀況也在發生變化。如何處理在教學設計未曾預料、也無法預料的“課堂意外事件”，如果強行按照原教學設計方案進行教學，勢必壓抑學生的積極性與創造性，因為學生任何一個思想的火花都可能迸發出創新的火苗；如果任何一個課堂中生成的東西，教師都要顧及到，勢必影響教學進度，導致教學任務無法完成。教師處在一種進退維谷的兩難境地，教師需要更多的教學機智以應對這種局面，正如有的研究者所說，“課堂教學不是教師教學行為模式化的場所，而是教師教育智慧充分展現的場所。”

教師教學面對的是一個個富有個性、具有不同的生活方式和經驗的學生，現代教學設計不能忽視個性的存在。因此，教師教學不能拘泥于預先設定的固定不變的程式，鼓勵師生互動中的即興創造，可以超越目標預定的要求。教師只有充分發揮自身的教育智慧，把學生置于教學的出發點和核心地位，認真考慮學生的需求，充分發揮學生學習的積極性、主動性和創造性，根據實際教學中學生的變化隨時調整自己的教學，課堂才能煥發出生命的活力。3．知識教學與情感態度價值觀并重

新課程強調知識技能、過程方法、情感態度價值觀三維目標的整合，課程改革的目標之一就是要實現課程功能的轉變，要“改變課程過于注重知識傳授的傾向，強調形成積極主動的學習態度，使獲得基礎知識與基本技能的過程同時成為學會學習和形成正確價值觀的過程。”在傳統教育中，知識的掌握往往成為評價學生的惟一尺度，而學生情感態度價值觀的培養與發展由于沒有統一的評價尺度，不易操作，致使教師、學校以及家長對學生情感態度的發展重視不夠，教師也未將學生這方面的發展納入自己的教學設計中。情感態度價值觀隸屬于人的內心世界，而人是內心世界是極其復雜的，是難以揣度的，因而無法通過教師的傳授而直接獲得，必須通過學生在學習的過程中親身實踐才能不斷地潛滋暗長。教師在進行教學設計時，要依托于教材，即“用教材教”而不是“教教材”，在引導學生學習的過程中，為學生情感態度價值觀的發展創設適宜的環境，把知識技能的學習與情感、態度價值觀的培養結合起來，對學生進行潛移默化的影響，真正成為學生學習活動的組織者、引導者與合作者。

課程實施包括教學設計、教學設計的實施、教學評價三個階段，教學設計雖然對教學不起決定性的作用，但也起著十分重要的作用，是整個教學過程的起始階段，對教學過程起著宏觀調控的作用。教師在教學之前需要進行教學設計，但在教學過程中又不可拘泥于教學設計，被教學設計束縛了手腳，一切應以學生為重，以教促學，應學生動而動、應情境變而變，對課堂教學各種變化進行綜合把握，及時做出正確的判斷，采取有效的措施。

總之，實施新課程，關鍵在教師，我們的教師必須不斷對照新理念反思自己的教學行為，不斷改進自己的教學方法和改變學生的學習方式，才能使學生在課堂上較好地實現知識的傳承、能力的發展、態度與價值觀的形成的統一。

2009年10月

如何在教學設計中體現新課程理念

南 文 鉉

哈爾濱市阿城區朝鮮族中學校