UI設計基本知識分享

1、網(wǎng)站導航設計一：導航設計1.導航的作用導航的作用導航是網(wǎng)頁設計中不可缺少的部分，它是網(wǎng)站訪問者獲取所需內(nèi)容的快速通道和途徑。導航讓網(wǎng)站的層次結構以一種有條理的方式清晰展示，并引導用戶毫不費力地找到并管理信息，達到有效傳遞。同時，導航一般位于網(wǎng)頁的中上部分，也是視覺中心的區(qū)域內(nèi)。在保持其合理的功能作用的同時，一個好的導航設計，往往能夠成為整個網(wǎng)頁設計的點睛之筆！2.導航分類A.材質類，給導航加點材質材質類，給導航加點材質！材質類的導航，是潤色導航、增加導航意味最常用的設計方法。在有特殊定向和用戶指向的網(wǎng)站設計里是廣被設計師們使用的手法。這種快速、簡單、效果直接的設計方式，能夠迅速將產(chǎn)品的特性和設

2、計師的巧思呈現(xiàn)出來。并且材質類的導航設計往往都可以不必打破導航的基本形態(tài)，能夠很好的保持導航的功能性，頁面排版的整齊感。因此可以在固定的網(wǎng)頁原型的結構和位置上，靈活地表達產(chǎn)品的特性。設計師們可以隨心所欲雕琢內(nèi)部的材質，從而打造不一樣的意味導航，成為整個頁面的小小亮點。2.導航分類 A. 材質類，給導航加點材質！材質類，給導航加點材質！2.導航分類A. 材質類，給導航加點材質！材質類，給導航加點材質！2.導航分類B. 擬物類，讓導航不僅僅是導航擬物類，讓導航不僅僅是導航！如何讓一個頁面看起來如身臨其境融入了該網(wǎng)站產(chǎn)品的世界？那么就要讓用戶的視覺體驗真實地感受到該產(chǎn)品特性的存在。這個時候，一個普通

3、呆板的導航，遠遠不能滿足頁面的設計需要。即使產(chǎn)品圖片再誘人，一個毫不融入氛圍的冷冰冰的導航，在頁面上不僅讓人失望更加破壞了應該有的氣氛。所以，越來越多的設計，讓導航成為了烘托、增強網(wǎng)頁及產(chǎn)品氛圍的振奮一筆！擬物類的導航，就像變色龍，在不同定位的網(wǎng)頁設計中，捕捉和適應環(huán)境的特點，從而化身為環(huán)境的一部分。擬物類的導航，可以是抽屜，可以是布條、可以是樹木，可以是任何你能想到和創(chuàng)意出來的東西！打破一切既定的規(guī)則，不必一定要是長條四方，不必一定要是整齊劃一的排版，擬物類的導航可以將設計師的能動性發(fā)揮到極點！這樣的導航設計，在整個網(wǎng)頁中可以達到另外一層的功能性，那就是輔助提升產(chǎn)品給用戶的強大視覺認知度，還

4、未見其產(chǎn)品的詳細信息，你就能提前感受到它是干什么的，有什么樣的風格，有什么樣的追求。讓導航不僅僅只是導航！2.導航分類B. 擬物類，讓導航不僅僅是導航！擬物類，讓導航不僅僅是導航！2.導航分類B. 擬物類，讓導航不僅僅是導航！擬物類，讓導航不僅僅是導航！2.導航分類C. 形態(tài)類，換個形狀設計導航形態(tài)類，換個形狀設計導航！若問到導航是什么樣的，大多數(shù)人都會立刻浮現(xiàn)出幾種基本的形狀和樣式，頂部的橫欄、側邊的豎欄。即便是高矮胖瘦、顏色各異、材質各異，大多數(shù)的導航都不會跨出基本的界限。那么導航是不是一定要遵守形狀這個“規(guī)矩”呢？答案肯定是否認的。用戶雖然習慣了導航的“規(guī)矩性”，但是另類形態(tài)的導航設計卻

5、無疑給了用戶們一個新的視角，原來導航也可以“沒規(guī)沒距”！那么是否可以隨意改變導航的形態(tài)設計呢，答案也是否定的，設計師們始終都要記住導航的根本屬性和用途，讓導航始終都不能脫離它在頁面設計中的核心作用。如果你是一個大膽的設計師，又有新穎的設計理念和產(chǎn)品訴求，那么不妨嘗試做一次大地調整，換個形狀設計導航！2.導航分類C. 形態(tài)類，換個形狀設計導航！形態(tài)類，換個形狀設計導航！2.導航分類C. 形態(tài)類，換個形狀設計導航！形態(tài)類，換個形狀設計導航！2.導航分類D. 融合類，融合類，“和諧共進和諧共進”的導航設計的導航設計！有雷厲風行搶風頭的導航哥，也會有為人低調注重和諧的導航們。在某些網(wǎng)頁設計中，需求的導

6、向性會要求將導航一定程度的削弱，從而來突出產(chǎn)品的主體內(nèi)容。那么對于這部分的導航設計，設計師們該如何取舍呢？是簡單地羅列文字？還是將導航舍棄在邊角的位置？如何才能使得被削弱的導航仍然不失設計感，甚至能夠輔助主體內(nèi)容的突顯？這個時候，對導航的處理和設計就能更加體現(xiàn)出一個設計師對宏觀大局的把控，以及對細節(jié)局部的掌控，讓局部服從整體，但又不是粗糙對待，反而精致得恰到好處！削弱并不是不需要設計，和諧并不是隱藏和消失。很多優(yōu)秀的設計作品，在處理這類情況時，通常將導航和網(wǎng)頁主體背景進行關聯(lián)性的融合。從色彩的恰接、風格感受、背景圖片的關聯(lián)、線框等多方面都可以進行處理和設計。讓導航自然地呈現(xiàn)，仿佛為主體的一部分

7、，又退而求其次，把更多的視覺焦點留給了主體內(nèi)容。從而完美地保持其功能性，又能與整體頁面“和諧共進”！2.導航分類D. 融合類，融合類，“和諧共進和諧共進”的導航設計！的導航設計！2.導航分類D. 融合類，融合類，“和諧共進和諧共進”的導航設計！的導航設計！2.導航分類E. 延展類，導航設計的更多可能性！延展類，導航設計的更多可能性！設計是在不斷進步的，隨著用戶體驗的提高、用戶認知度的拓展、產(chǎn)品需求的多樣性、設計師理念的不斷探索和更新，我們相信，導航設計將存在更多的可能性！也許下一個新的設計形式就誕生在你我之間！越來越多關于導航設計的研究和探索，將會給用戶帶來全新的視覺和使用體驗！文字與bann

8、er的故事Banner簡介 設計banner可能并不難，但是設計一個稱職又有視覺沖擊力的banner，還是需要經(jīng)驗積累的。設計師應該力求自己設計的每個banner都經(jīng)得起多方面的考驗，在這個小方塊里真正的做到有板有眼才行。一.文字的基本排列混搭設計banner時候，千萬不要不加思索的就把一行文字硬生生的放上去，那會讓你的banner直接顯得呆板木訥。往往很多新手設計師容易犯這樣的錯，就算字體顏色樣式處理的很好，也會看上去很無趣、很僵硬。這時候我們就需要做一些文字排列混搭的設計：大小和顏色的混搭排列組合的混搭不同字體之間的混搭中英文字體的混搭以上都是一些常見的處理方式。當然這也是banner文字

9、設計的基礎，其他很多的文字處理方式都建立在混搭的基礎中，所以做好混搭的重要性就不言而喻了。一.文字的基本排列混搭一.文字的基本排列混搭一.文字的基本排列混搭二.文字的傾斜與斜切有時候設計banner，根據(jù)背景構圖不同或者我們想要更有視覺沖擊力表現(xiàn)文字內(nèi)容時，我們可以嘗試對文字進行傾斜或斜切透視等處理，有時候這會更會令你達到意想不到的效果。普通的文字排列平平穩(wěn)穩(wěn)，方正有矩，我們可以用傾斜或者斜切打破這種“穩(wěn)定的構圖”，讓畫面更有動感和層次感。二.文字的傾斜與斜切二.文字的傾斜與斜切二.文字的傾斜與斜切三.讓文字形成相對獨立的區(qū)域banner設計時，考慮到有些時候背景顏色比較復雜，也可能背景有比較

10、多產(chǎn)品等元素，這時我們需要讓文字放在一個相對獨立的區(qū)域或色塊中，如果沒有相對獨立的區(qū)域，我們就要自己設計創(chuàng)造出這個獨立區(qū)域和色塊，這樣更便于文字閱讀，也能讓文字的視覺焦點加強三.讓文字形成相對獨立的區(qū)域三.讓文字形成相對獨立的區(qū)域四.文字變形的魅力設計banner和專題頭圖時，設計師經(jīng)常用到文字變形，好的文字變形直接可以影響到文字的趣味性的提升，讓banner和頁面的氣氛被烘托得相得益彰。很多設計師感覺設計banner只是個小工作，用不到文字變形那么麻煩，其實不盡然，選好合適的參照字體進行簡單的文字變形并沒有多么復雜，但是卻能提升banner設計的品質，所以說益處良多。四.文字變形的魅力四.文

11、字變形的魅力四.文字變形的魅力四.文字變形的魅力四.文字變形的魅力四.文字變形的魅力五.文字的3D應用3D文字效果的應用在banner設計中也十分常見，利用好AI和PS等工具可以制作出令人滿意的3D文字，如果你肯花多一點的時間，在材質或者光影上還可以做到進一步的效果提升。五.文字的3D應用五.文字的3D應用六.生活中的字體元素我們設計歷史文化頻道的banner時，或者當我們設計中國傳統(tǒng)的節(jié)日時，經(jīng)常要用到一些中國風的元素，就例如毛筆字。在生活中字體元素，毛筆字、粉筆字、字帖等我們也可以把它們活用在banner中，配合合適的背景和主題，讓你的設計更突顯出banner氣氛。六.生活中的字體元素六.

12、生活中的字體元素七.猶抱琵琶半遮面banner中，字體的設計一定要清晰，這樣可以便于用戶更流暢的閱讀。不過有時也可以讓文字“半隱半現(xiàn)”，前提當然是在保證沒有閱讀壓力的情況下?！鞍腚[半現(xiàn)”的文字可以讓你設計的banner更生動更有層次感。七.猶抱琵琶半遮面文字的下方部分被隱藏住，但是并沒有妨礙閱讀，反而讓文字有了種融入背景環(huán)境的感覺。七.猶抱琵琶半遮面文字的左邊緣被上一個字壓住，有種層疊的感覺，讓文字的排列更顯層次。界面設計速成一、內(nèi)容概括1、如何做到易發(fā)現(xiàn)2、如何優(yōu)化信息間的關系3、如何用信息分解體驗目標二、觀點為用戶而設計當用戶第一次使用一個產(chǎn)品時，會迫切需要知道下一步該做什么，當逐漸熟悉產(chǎn)

13、品后，他還需要知道信息與信息之間的聯(lián)系，從而進行其他功能的探索如何解決用戶體驗上的需求，界面的視覺上應該滿足一下2點1.重要的信息重要的信息 易發(fā)現(xiàn)易發(fā)現(xiàn)2.信息與信息之間的關系清楚信息與信息之間的關系清楚1-1如何讓信息易發(fā)現(xiàn)1-1如何讓信息易發(fā)現(xiàn)2-1如何優(yōu)化信息與信息之間的關系界面設計中 信息與信息之間的關系常見有以下三種同類同類 異類異類 從屬從屬如何用視覺手段區(qū)分信息與信息之間的關系？我么可以借助點線面 將信息歸納總結2-1如何優(yōu)化信息與信息之間的關系對同類信息的處理2-1如何優(yōu)化信息與信息之間的關系2-1如何優(yōu)化信息與信息之間的關系2-1如何優(yōu)化信息與信息之間的關系2-1如何優(yōu)化信息與信息之間的關系2-1如何優(yōu)化信息與信息之間的關系2-1如何優(yōu)化信息與信息之間的關系2-1如何優(yōu)化信息與信息之間的關系2-1如何優(yōu)化信息與信息之間的關系2-1如何優(yōu)化信息與信息之間的關系