《UI界面設計》課件-Chapter 1 第一章 設計師的“劇本”1界面設計概念

UI點擊愉悅HomeServiceProkectAbout情感體驗介入的界面編輯設計01設計師的“劇本”CONTENTS·目錄·02設計師的“思維”03設計師的“財富”04設計師的“智慧”05設計師的“寶藏”06用戶的“夢想”設計師的“劇本”01一、界面設計界面的含義界面（interface）：一種平臺，是人與機器、人與物體之間用于溝通的一種媒介?！敖缑媸侨伺c物體互動的媒介，換句話說，界面是設計師賦予物體的新面孔。在設計里,界面是人與物體互動的媒介?！?/p>

——概念源自百度百科“界面廣義上泛指物體與物體的接觸面，狹義上特指人們用一個產品完成任務的方式。我們可以把界面定義為：存在于人和機器互動的過程（HumanMachineInterac_x0002_tion）中的一個層面，它不僅是人與機器進行交互溝通的操作方式，同時也是人與機器相互傳遞信息的載體。由于界面總是針對特定用戶而設計，因此，我們也把界面稱為用戶界面?！薄拍钤醋浴稊底纸缑嬖O計》一、界面設計用戶界面設計的三大原則：置界面于用戶的控制之下減少用戶的記憶負擔保持界面的一致性一、界面設計狹義的人機界面廣義的人機界面界面人與機之間的一個相互作用的媒介，人可以通過它以視覺和聽覺、觸覺等感官接受來自機器的信息，經過人腦的識別、加工、決策，然后做出反應，實現人—機器的信息傳遞。計算機系統(tǒng)中的界面。一、界面設計［用戶界面（UserInterface，簡稱UI）］對軟件的人機交互、操作邏輯、界面美觀的整體設計。一、界面設計[人機交互]人與計算機之間使用某種對話語言，以一定的交互方式，完成確定任務的人與計算機之間的信息交換過程。一、界面設計如何設計出一套功能強大，又能有利于簡化用戶操作步驟的界面？一、界面設計以用戶為中心。多通道設計。要盡量地挖掘人體的各部分器官的功能特點，來符合用戶多方面的生理機能，達到身心舒適的效果。第三，界面的細微設計上要遵循一定的原則例如文字大小、色彩明暗、線條粗細、曲線與直線、位置等方面的擺放都有一定的原則。一、界面設計一、界面設計人機界面設計思想：“以人為本”一、界面設計案例“HumanNature”阿姆斯特丹發(fā)起的（人類自然）的活動阿姆斯特丹發(fā)起的“HumanNature”（人類自然）活動打造的一款交互式網站——“IdeasUnited(創(chuàng)意聯盟）”，以Timeline（時間線）的形勢呈現了在此次大會上來自不同領域不同專家的精彩演講。?隨心和隨機是這個設計師的風格。觀者喜歡這種外觀和它天然自然的樣子。設計師遵循著自然的法則，展現出個性化界面。?一、界面設計案例八小時工作日網站八小時工作日的網頁，鮮艷醒目的色彩，充分調動用戶的視覺感官，有利于整體系統(tǒng)導航。熱情活潑的橘色給人留下了深刻的印象。在橘色色調變化形成的背景中，使用白色文字，整個氣氛變得干凈利索，更能抓住用戶的視線。這個網頁設計注意到了對于亮色、字體和裝飾的機智運用，聰明地吸收這些元素并將它們進行現代化的創(chuàng)作。在這個作品中主要目標是用最快最好的方式將設計理念傳達給觀眾，同時，也適當在作品里留些小玄機，給那些仔細觀察的人去發(fā)掘更有趣的東西。?一、界面設計案例/home.html界面抓住用戶好奇、樂于探索的視覺心理，應用黑色為背景，簡單、古樸、神秘。它純粹并且能夠搭配各種顏色。這個網站的主體形象是個多面體，好似外星飛船。點到不同的面時會發(fā)光，像開啟一扇窗，讓人禁不住想要往里看。人們可以從不同的層面去欣賞這個網站?？梢宰屓苏业揭环N絕佳的組合方式。在兩個極端之下尋找平衡。這和利用顏色是一樣的，大部分是單色調的，而另外一部分有著夸張的色彩。整個網站的中心是個動畫形式，鼠標觸碰就有旋轉，使這個網站充滿著生命力。?一、界面設計案例/bondcars/網站運用純色大色塊當背景，采用大面積的空白，更加突出主題的汽車，讓觀者一目了然。?一、界面設計案例.au/網站上會有不同種類的卡片，在這里你可以找到有關商業(yè)卡片、個性的身份卡片、請?zhí)?、有設計感的卡片，還可以找到發(fā)行額有限的限定版。有很多信息供你選擇，每個小方塊都可以點擊進入到下一頁面，操作方便。?一、界面設計案例/這個設計基本上是引入了“方塊”的元素，由網格樣式的純色塊加上照片或文本。它清晰簡易從而易獲得用戶的認可。結合圖像、文本與色塊之間產生強烈的視覺對比，引起用戶視覺興趣，刺激用戶探索下去。界面具有很強的可讀性，行距本身也具有很強的表現力。為了加強版式的裝飾效果，界面有意識地縮窄或者加寬行距，體現了獨特的審美意趣。例如，加寬行距可以體現輕松的情緒，還可以應用于娛樂和抒情性的內容。另外，通過精心的安排，使寬、窄行距并存，可增強版面的空間層次與彈性，表現出界面獨到的匠心。?界面操作界面顯示界面控制作用用戶通過操作界面發(fā)出信息，操作機器執(zhí)行指令。操作界面包括：觸控屏幕鼠標鍵盤操作手柄遙控器……信息顯示用戶通過顯示界面監(jiān)控機器對指令的執(zhí)行狀況，同時也通過顯示界面了解機器在執(zhí)行指令之后的狀況。包括：圖文聲光……一、界面設計界面的分類一、界面設計一、界面設計一、界面設計一、界面設計界面的分類功能性界面情感性界面環(huán)境性界面界面實現的是使用性內容在于把握使用者的感情外部環(huán)境因素對人的信息傳遞一、界面設計如圖網頁界面設計《HighQualityExecutionbasedon

YearsofExperience》就是典型的功能性界面設計，界面功能分區(qū)清晰易懂，從上面的導航欄設計，四塊分欄，到中間的核心內容展開，以及具體內容按鈕分區(qū)一字排開，明了整齊，讓用戶完全輕松使用。▼案例/gallery/MyDigiSource/119731