第一篇：手機ui設計教程
手機ui設計
“Metro”，移動設備視覺語言的新新人類
何謂“Metro”?“Metro”本意是指“地鐵”?？v觀機場、地鐵、公交線路圖等，會發現這些導視設計都具有高度概括性，對比度強烈等特點，并被用來指導人們更快的找到自己要去的目的地。
“Metro”之源
一個移動設備的界面設計語言怎么會跟地鐵掛上鉤呢?每一次改革創新的背后，都有一個主導思想。微軟這次推出的Windows Phone 7(以下簡稱WP7)背后也存在著一個設計語言，設計思想，這個設計語言正是源于交通導視圖的這些特點而產生的靈感!在微軟內部這種設計語言被命名為“Metro”。
“Metro”之新
1.圖標
WP7整個界面展現出的“圖標”完全跟 “圓角、漸變、陰影、光澤感”說拜拜，用純二維以及高度概括性弱化了視覺上的復雜性，讓用戶沒有過多的去關注圖標本身，而是增加其辨識性和標識性，達到強化內容和信息的目的。
2.界面布局 Home頁沒有像九宮格那樣整齊排布，而是用一個一個單一的色塊平面化的對界面進行大膽的分割。其他的界面也去掉了那些繁復冗余的設計細節，沒有過多絢麗的色彩，沒有花哨的光影，強調用文字信息進行排版，更多的是關注內容本身，更關注用戶想要什么，用一種銳利直白的視覺語言來表達了真實的內容。
3.字體
字體是“Metro”展現其設計美感的一個重點，它主要使用的是較細的Segoe UI字體，通過把字體放大、縮小來得到好的效果和設計感。在“Metro”中沒有需要操作的復雜的界面來轉移用戶對內容的注意，取而代之的是用戶本身關注的內容，簡而言之：內容即界面!這樣極大地減少了用戶視覺上的干擾、增強了引導性，讓原本“擁擠”了的各種內容和信息的界面顯得更加地“透氣”。
在一個充斥著各種漸變和各種效果的時代，WP7能如此大膽地拋開了傳統視覺設計語言的束縛，不惜代價地提高視覺上的清晰度和辨識度，把追求簡潔發揮到了極致。
“Metro”之“優”與“憂”
不可否認，“Metro”在視覺設計上的確有著其獨到之處，而事實上，其“新”更是理念上的，這種理念上的創新設計在某些方面擁有一定的優勢，具體體現為以下幾個方面：
1.信息的完整體現
傳統的手機終端已經被Application包裹得越來越緊密，而你的生活和需求卻不是一個一個單獨 的App所涵蓋的，而是穿梭在不同類型的信息里。是否有新的信息、電話或者有新的狀態更新，可以掃一眼就看到，這種強調類似SNS信息流的設計讓用戶更好地回歸到體驗手機的本質功能上。 WP7在概念上遵循了這種源于信息和內容的思路，“Metro”的出現也正是為了消除這種概念上的不對稱，當這種理念的核心價值表現在實用主義與內容至上的時候，一切視覺上的語言都顯得不那么重要了。
2.Panorama Panorama的設計采用了類似畫卷一樣的橫向滾屏的設計，摒棄了傳統的滾動條，使得內容界面變得可以滾動，即讓用戶避開了一層一層的操作窗口又能一口氣瀏覽信息到底。
3.內容至上
WP7不是在標新立異，而是從用戶對信息的需求出發。他把極簡主義，內容至上原則帶到了移動終端設備的視覺設計上，不能不說是開辟了一種更強調實用的設計方向。
“Metro”在理念上夠新，視覺上夠酷，但它是否真的適應當前的移動終端?我們不得不對其產生一些質疑和擔憂：
1.對一種字體的過度依賴
拉丁字母非常配合Metro的設計理念，將簡潔明快發揮到了淋漓盡致。而這就像一把雙刃劍，導致“Metro”過度依賴拉丁字母本身所帶來的魅力而忽略了例如中文，日文等非拉丁文。
這些語言是否還能在“Metro”的設計理念的引導下，在視覺上是延續這種字體的魅力呢?至少到目前為止我們還沒有看到有說服力的證明。
2.視覺的單調性
純2維的圖標有非常高的指示性，但卻缺乏一定的豐富性。 在“Metro”的視覺語言下，剝奪了圖標原有的個性和情感，把其轉化成一個個沒有生命的指示牌。就像你無法指望那些交通標識能帶給你什么驚喜和趣味，而只是冰冷生硬的指示。這對第三發開發者來說不能不說是一個遺憾。
3. 用戶習慣與認可度
在iPhone，Android系統橫行于市的今天，可能用戶早已習慣了那種操作界面的方式，而WP7的各種操作明顯有別于市場上其他系統，因此需要一定的過程和培育時間成本來讓用戶接受。早在幾年前，當時西門子推出Xelibri從設計理念上也夠新、夠酷并轟動一時，但用戶接受程度卻不盡如人意，最后慘淡收場。因此，微軟在視覺和體驗上做出如此大的變革，這不僅需要考驗用戶的耐心，更要考驗微軟的毅力與決心。
“Metro”之展望與啟示
其實“Metro”這個設計語言在之前的Zune上就有多多少少的體現，垂直的大號文字導航系統，加上扁平化的色塊，一目了然。在WP7面世后，“Metro”這個設計語言開始正式被大范圍系統化的應用和推廣，以此設計哲學和理念匯編成的Metro book，用其簡明的布局和明快的色彩對“Metro”這一設計語言的特色進行了最好的詮釋。
由Xna Creator Club Online演化出來的App hub也承載了Metro的設計理念。 “Metro”作為一種新的設計語言出現在移動終端中，更像是一種現象的延續，記得曾看過一篇Creative Review 的文章“The New Ugly”。我們不是在這里崇拜丑陋主義，但這種思潮卻在近些年不斷地影響著整個設計界，包括倫敦2012年奧運會標志，WACOM的新標志，紐約出租車標志都成為對傳統審美爭議的焦點。
不管是在界面還是體驗上，都需要有一個差異化的核心價值，當這種體驗的核心價值表現在內容至上時，無所謂對與錯，進步或后退，所謂的視覺次于內容，并不意味著視覺設計的地位被減弱了，相反更需要設計師去提煉“設計”。
Android 4.0 界面變化：加入WebOS 設計元素
http:// 2011-10-19 09:32 深圳新聞網 【字號：大 中 小】
Google今日將在香港發布代號為Ice Cream Sandwich的全新Android 4.0操作系統，可跨手機、平板及電腦使用，同時三星與Google合作采用此操作系統的第三代Google Phone，也將同時發布。 Android 4.0 雖然延期發布，但泄密并沒有延期。繼之前泄露的 Nexus Prime 真機視頻，現在 Nexus Prime 運行新系統的截圖也在 mobilissimo.ro 泄露出來。泄密不到八小時，這些圖片就應版權方的要求撤下，從側面印證了圖片真實性。美中不足的是這些圖片的分辨率經過調整，只有 800 x 450，無法反映新界面的所有細節。那就先粗看下一代 Android 手機系統界面上的變化：
第一張圖是鎖屏界面，可以看到頂部通知欄右側不再顯示時間，因為主屏已有時鐘顯示。Android 2.3 的鎖屏界面則會重復顯示兩個時鐘。這只是很小的改變，不過細節也正是 Android 之前欠缺的地方，同時鎖屏界面整體上也比之前更干凈。
自 Android 3.0 開始，前 webOS 用戶體驗設計師 Matias Duarte 就在把越來越多的 webOS 設計元素帶給 Android。4.0 的半圓解鎖區與 webOS 手機如出一轍，不同之處在于新的解鎖區提供了快速啟動相機的選擇，非常方便的設計。
Android 的設置界面一直很讓人抓狂——沒有分類、排序沒有邏輯。3.0 有所改善，但布局不適合手機。我從 09 年 1 月起長期使用 Android 手機，有些設置至今都要找一會兒。使用時間更長的 @lordhong 對此也有同感?，F在我們還看不到設置的全貌，不過單從右圖來看，新的設置界面終于有了分類，WiFi、藍牙等常用功能不但出現在設置首頁而且可以直接開關。
左圖是將時鐘 Widget 拖放至桌面時的預覽，除了底部有五個快捷鍵以外，其它地方和 3.0 并無不同。右圖被人當成 2.3 系統里長按 Home 鍵彈出的近期應用，不過這明顯應該是文件夾。我更偏愛 iPhone 的文件夾表現形式，但 4.0 也不錯，比 2.3 的丑陋設計優雅太多。
底部的返回、Home、多任務同樣延續自 3.0 系統，不知道在游戲等全屏應用下會怎么處理——如果隱藏的話怎么恢復顯示? http:// 2011-10-19 09:32 深圳新聞網 【字號：大 中 小】
左圖很有意思，Android 的應用列表自 3.0 開始分屏顯示。4.0 延續了分屏設計，但放棄了之前平庸的過渡效果，而是和諾基亞N9 一樣——滑開一屏圖標的同時，下一屏圖標浮現出來，就好象被推到前面一樣。關于這個效果，建議看之前的視頻，比截圖更直觀。
Widget 以縮略圖形式和應用放在一起等待選擇也是 3.0 開始的設計。我見過不少普通用戶桌面一個 Widget 都沒有，只是像 iPhone 一樣堆著一排排圖標，因為他們根本不知道有這樣的東西?，F在的做法應該能鼓勵他們布置更高效更個性化的桌面。而且相比 Android 2.3 添加 Widget 只能靠文字描述，必須丟到桌面才能知道究竟是什么樣的可怕體驗，新設計無疑方便很多。
http:// 2011-10-19 09:32 深圳新聞網 【字號：大 中 小】
新的多任務界面延續自 3.0 系統，采用縮略圖與圖標的組合，高分屏用在這里會比 2.3 更有意義。最后是這部 Nexus Prime 的 About 頁面，i9250?我對 4.65 英寸的怪獸不是很感興趣，不過 4.0 系統的細節改進確實非常有吸引力。此外光從這些縮小過的截圖也能看出新圖標的細節比原先豐富很多(圖片點擊放大)。
Android 4.0 目前只展露出部分面目，不過至少從現有截圖和視頻來看，它的界面相比 Android 2.3 稱得上飛躍。系統界面這塊短板至此差不多已經補上了，這樣的色調不可能討好所有人，但喜歡黑色背景的人應該都會比較滿意。接下來我比較期待推送系統能徹底普及、第三方應用也變得更漂亮一些，不然和系統反差實在太大。
iphone Web App 導航設計探討
一葉苦雨 | 時間: 2011-10-19 | 1,428 Views 交互設計
最近在做iphone端Web App的項目。由于產品形式新穎，技術環境不成熟，公司給與了較寬松的研發時間。在一個月的交互設計階段，每個環節都得到多次討論推敲，我從中感悟頗多。導航系統的設計是一個比較典型的點，拿出來與大家分享討論一下。
導航系統所遭遇的挑戰
iphone Native App較常見的導航如下圖所示：
手機屏幕底端：A、B、C、D四個tab組成該Native App的全局導航，這是我們經常見到的tab導航欄。
手機屏幕頂端：主要有四種形式。第①種形式是在該位置中心顯示產品的logo;也可以將logo適當調整位置，將常用操作或快捷入口放在該位置的右側。第②種形式是在該位置有兩或三個tab選項。第③種形式是在該位置中間顯示當前任務標題，在左右兩側放置導航控件或功能控件。第④種形式是在該位置放置搜索框。
與以上的Native App導航方式相比，Web App導航方式有著巨大的不同，如下圖所示：
Safari瀏覽器的工具欄將一直占據著屏幕的底端位置，全局導航只能被動移動到屏幕的頂端位置。這是影響Web App導航設計的最重要因素。
如果產品的功能比較少，且沒有特別要突出的功能的時候，可以設計成上圖中第①種導航方式。此時存在的問題是如何表現出產品的品牌，畢竟在Safari瀏覽器登錄某網站比運行一個Native App給人的品牌認同感弱很多。
如果將產品logo表現出來，且產品需要將用戶常用功能突出(比如刷新功能或者發布入口)，就需要設計成上圖中的第②種導航方式。
如果在A功能板塊下，還需要設置子類別選項，則導航欄中又多一組tab。此時的導航方式就如同上圖中的第③種了。
當然，在執行某一項任務的時候，全局導航可以暫時“歸隱”，只保留一行標題欄和左右兩側的導航控件或功能控件。如上圖中第④種導航方式所示。 在該產品設計中，為方便用戶在各功能板塊之間快速省力地切換，設計師希望全局導航欄可以保持長久懸停，不要像一般wap網頁似的讓導航隨網頁滾動消失。這樣的話，基于瀏覽器的Web App 導航系統便捷性就和Native App相媲美了。 然而，瀏覽器工具欄將全局導航逼到了屏幕的頂端，卻又造成了導航頭部過于沉重的問題。如下圖所示：
如果將logo欄中的常用功能(例如刷新或發布入口)和全局導航都設計為懸浮停留的形式，內容區的信息展示空間就比Native App減少了一行的高度，如上圖中的①。而且，某些頁面需要在全局導航的下方出現二級導航;懸停不動的3行導航大大吞噬了屏幕本來就很寶貴的內容顯示空間，如上圖中的②。 讓用戶在如此狹小的空間不得不頻繁滑動屏幕瀏覽信息，這樣的體驗太糟糕了。這個嚴重的問題很讓設計師困擾，因此需要重新設計一下導航系統。設計過程主要包括：優秀競品分析、方案遴選。 優秀競品分析
首先，分析對比了三款優秀的Web App：Google+、FT Web App、Twitter的導航方式。瀏覽環境均為iphone Safari瀏覽器。
1.Google+
導航系統特點：
?全局導航單獨形成一個頁面，其他頁面不出現全局導航; ?導航欄沿用了ios系統原生控件的形式：標題+導航或功能控件; ?標題欄在頁面中懸停不動 優點分析： 保證了每個信息瀏覽頁面的導航欄簡潔輕薄，盡量少的占用信息詳情的顯示空間;保證了其核心功能(此處是微博瀏覽功能)的良好使用體驗。 缺點分析：
全局導航隱藏較深，降低了用戶在不同功能板塊快速切換的便利性;全局導航隱藏較深，用戶看不到其它板塊功能，大大降低了用戶點擊使用其他功能的可能性。
2. FT Web App
導航系統特點：
?Safari瀏覽器URL一欄一直懸停存在，并將品牌文字FT Web App顯示在頂端; ?全局導航被隱藏起來，點擊功能鍵后在頁面頂端出現; ?二級導航出現在頁面頂端; ?全局導航和二級導航由于新聞板塊數量較多，都采取了單行空間不完全呈現的方式，可滑動選擇其中某一項;
?所有導航隨頁面滾動，不在屏幕中保持懸停; 優點分析：
FT Web App導航設計最大的優點就是繁重導航的輕量化處理。全局導航和二級導航中的新聞板塊都非常多，若將這些板塊都展示出來，恐怕要占用屏幕的一半顯示空間。FT Web App于是將全局導航隱藏在一個功能鍵之后，二級導航也只給了一行的顯示空間。 缺點分析：
展示給用戶的導航只是其全部新聞板塊的冰山一角，無法給予用戶全部概況瀏覽的機會，也就無法很好的激勵用戶去嘗試被隱藏的新聞版塊;同時，用戶尋找某一個新聞版塊或者在頁面底端回到頁面頂端的操作成本略高。
3.Twitter
導航設計特點：
?全局導航只有一行，品牌展示濃縮在主頁圖標中(Twitter小鳥圖標); ?全局導航一直保持在屏幕頂端懸停不動，不隨頁面滾動而滾動; ?二級導航在點擊全局導航某tab后，以菜單列表形式出現。 優點分析：
在屏幕頂端懸停不動的全局導航，可以方便用戶在不同的功能板塊之間快捷切換，降低了用戶的信息尋找成本;Twitter Web App的導航只有一行，為用戶保證了盡量大的正文內容顯示空間。 缺點分析：
一些常用的功能鍵被隱藏在二級導航中(比如新信息發布入口)，一方面增大了用戶的尋找成本，另一方面降低了這些常用功能對用戶的激勵使用效用。 基于對以上三款Web App產品導航系統的分析，設計師對目標項目的導航系統設計形成了以下框定：
?全局導航方便用戶快速尋找以及功能板塊間的切換;
?導航盡量輕薄化處理，盡量保證足夠的正文內容區顯示空間; ?將用戶經常使用的功能鍵呈現在前面。
方案遴選階段
基于項目的實際需要以及對競品分析的思考總結，設計師嘗試了3款導航設計方案，并對每一款方案的優劣之處進行了詳細分析。
導航設計方案一
設計說明：
? ABCD是產品的四個功能板塊，組成全局導航。 ? 全局導航在屏幕頂端保持懸停不動。 ? E是新消息發布入口，屬于用戶常用功能。 ? E采用半透明顯示方式。 ? E停留在屏幕的右下角 該方案的優點：
屏幕頂端只有全局導航一欄，導航的輕量化為正文內容區節省了盡量大的顯示空間;全局導航懸停不動，可以便于用戶快速切換到不同的功能板塊。 該方案的缺點： 右下角的新信息發布入口致使瀏覽頁面不夠清爽，會對用戶造成一定的視覺干擾;新信息發布入口沒有必要在任何頁面都顯示，于是可尋性出現了危機;品牌logo無法顯示，品牌感較弱。
導航設計方案二
設計說明：
? E是新消息發布入口，屬于用戶常用功能。 ? ABCD是產品的四個功能板塊，組成全局導航。
? 屏幕頂端的兩行導航欄在用戶剛進入頁面的時候出現，在用戶滑動屏幕瀏覽信息的時候消失。
? 屏幕右下角半透明功能鍵在導航欄消失后出現，點擊該鍵導航欄出現。 該方案的優點：
瀏覽信息的時候導航欄消失，為用戶提供提供了最大的正文內容顯示空間;可以顯示logo，品牌感較強;新信息發布入口的可尋性較好。 該方案的缺點：
屏幕右下角半透明功能鍵致使瀏覽頁面不夠清爽，會對用戶造成一定的視覺干擾。
導航設計方案三
設計說明：
? E是新消息發布入口，屬于用戶常用功能。 ? ABCD是產品的四個功能板塊，組成全局導航。
? 屏幕頂端的兩行導航欄在用戶剛進入頁面的時候出現，在用戶滑動屏幕瀏覽信息的時候第一欄向上消失，第二欄上移至頂部保持懸停不動。 ? 手動下拉全局導航欄，可以下拉出第一欄導航。 該方案的優點：
瀏覽正文信息的時候，僅顯示全局導航一欄，做到了導航的輕薄化;全局導航懸停不動，可以便于用戶快速切換到不同的功能板塊。 該方案的缺點：
下拉全局導航時，可能會有誤操作的危險，雖然可能性很小。
綜合以上的分析，考慮到正文內容區顯示空間的大小、對產品的操作便利性以及產品品牌感三方面因素，最終決定將方案三作為導航設計的基本形式，并繼續進行進一步豐富細化。
總結：
瀏覽器的工具欄一直占據著屏幕的底端位置，全局導航只能被動移動到屏幕的頂端位置。如何平衡操作的便捷性與正文信息顯示空間最大化的關系，是Web App導航設計的關鍵所在。
最佳方案總是權衡的結果。每一款設計方案解決某些問題的同時也會產生新的問題。此時設計師需要知道哪些功能是最重要、優先級最高的，保證核心功能的良好用戶體驗是評判設計方案的重要準繩。
第二篇：學UI必看ui設計教程之ui學習方法
免費試學/ 一對一輔導/項目實訓/就業保障
學UI必看ui設計教程之ui學習方法
當前我國移動互聯網等新興互聯網產業進入了高速發展的階段，產業規模不斷擴大，增速飛快，用戶體驗至上的時代已經來臨。隨著技術領域的逐步拓展，產品生產的人性化意識日趨增強，用戶界面設計師(即UI設計師)也成為了人才市場上十分緊俏的職業?！綰I設計月薪多少錢?>>】需要招聘該類型人才的企業不僅僅局限于移動互聯網企業，越來越多的企業開始注重交互設計、用戶測試方面的投入，如金融、交通、零售等一些行業均需要該類型設計人才?！綰I設計需要學什么?>>】
其次，UI設計師的薪資隨著市場需求量的暴漲和人才的供不應求也是水漲船高，一點不亞于大家熟知的軟件開發工程師等高薪行業，即時工作經驗不多的UI設計師月收入也能達到5000元以上，有兩年以上經驗的UI設計師月薪10000元以上比比皆是，而且高級UI設計師的收入年薪20萬/30萬甚至更高的也大有人在。所以，UI設計師是當今一個不錯的選擇?！緦WUI設計好就業嗎?>>】 ui學習方法第一點：學習準備——啟蒙
學習一項技能，尤其是已經有一定沉淀并在各行各業有廣泛應用的技能，就一定要對它先有充分的認知。在開始正式學習前，你需要花足夠的經歷去了解和查閱它的起源、發展、應用、未來。UI作為平面設計的一部分，再往上又從屬與美術學這一大類。因此，首先要先去了解整個美術史的發展。
在今天的UI設計群體中，我們作為專業的設計人員，可以和別人侃侃而談雷軍的創業心得，羅胖子的工匠情懷，滴滴快滴的商業模式以及BAT在傳統行業的布局等等，各種其實并不太相干的話題，卻說不出半點藝術見解。
思考三個問題：設計是什么?設計是如何產生的?設計可以做什么? 免費試學/ 一對一輔導/項目實訓/就業保障
ui學習方法第二點：繪畫技巧——洞察
美術的三大項：素描、速寫、色彩。就是繪畫入門的三大基礎課題，我們學習的過程也是以這個順序逐步覆蓋的。如果想要在紙張上對現實世界的物體進行細致準確的描繪，也就需要我們更仔細的觀察事物。隨著繪畫的深入你就會逐漸培養一雙洞察細節的眼睛，你會對所有設計和形體做出本能的反應，分析它們的美丑，找出核心所在。
另外，適當的學習一下手繪吧，它將貫穿你整個職業生涯，在今后的學習工作中要保持這個習慣，相信我，每到一個合適的時機，它總會給你帶來意想不到的驚喜。 ui學習方法第三點：掌握軟件——手段
這一步就正式開始進入學習軟件的步驟。如果學習的是UI，那么以下幾種軟件是必不可少的：PS、AI、DW、……其余的根據愛好自己補充。
那軟件要學到什么程度?學到你可以用它臨摹出任何使用這種軟件設計的圖形。一定要記住，設計軟件只是我們用來實現設計的一種手段，過度沉迷在軟件的研究中是本末倒置的，但如果你使用軟件連抄都抄不出來，那就是一種不需要反駁的恥辱。 ui學習方法第四點：設計理論——實踐
廣義上來說，到這步才是真正開始學習設計，也是讓
一、二兩點作用開始充分發揮的時候。 每個方向都需要閱讀相應的教材，重要性無以復加，你需要在觀看的時候一邊做練習。然后才是具體設計類的書籍，記得不要再買那些無用的通篇告訴你軟件操作的書籍。 ui學習方法第六點：鑒賞模仿——超越
特地把這點放到后面，也是有理由的，前面的步奏都是一個設計師基礎素養的實現，而一個出色設計師還需要培養自己的套路和風格——站在巨人的肩膀上。 ui學習方法第七點：閱讀思考——擴展 免費試學/ 一對一輔導/項目實訓/就業保障
設計是一門需要沉淀的技藝，卻恰巧遇見了日新月異的互聯網文化。這讓大家對流行極具敏感度，而開始追趕潮流，輕視正統和法則。我相信，只要有足夠的耐心，是可以讓一個新手成長成為一名合格的UI設計師，請放慢你的腳步，不要急于求成。
【UI入門到精通教程>>】
泛藝學苑致力于UI設計高端人才培養，泛藝采用先進的在線教學模式，非一線城市的學生也能享受一流師資;采用國內一流的動態學習系統，能真正做到針對每個學員情況的特色學習計劃，保證成才;對教學品質的嚴格把控保障了泛藝畢業學員除工作習慣良好外，具備外面2~3年一線企業的設計師工作經驗，能保障學生進入企業迅速上手，學生效率是其他機構的2倍以上?！玖私庹n程詳情>>】
第三篇：UI設計的學習心得UI設計學習方法——中鵬UI設計相關課程
UI設計的學習心得
UI設計是一個用途比較廣泛的專業，很多人都搞不清楚這個專業到底都亞學些什么， UI設計在的電子界面領域應用非常廣泛，行業收入也比較可觀，學好UI設計意味著擁有廣泛的就業前景，但是UI設計的知識面非常廣，導致很多學員感到無所適從。下面我們就來從工具到理念講起
我一直堅持這樣一種看法，不管你學的是哪一種設計，其學習內容都無非包括四個部分：
1、了解專業背景知識，
2、掌握工具技能(如：如何學會繪圖、使用相關設計軟件等)、
3、商業運作規則的了解，
4、審美能力的建構藝術理念的習得。
一般的UI設計都會涉及的內容有：素描、UI手繪、UI色彩、三大構成、創意設計、設計心理、PS基礎、PS提高、illustrator、Flash、After Effects、設計規范、GUI基礎課程、創意設計、綜合理論與實踐、靜態網頁構建、前端程序開發、動態網站簡介和應用、UX理論、AXURE-RP6.5、iphone/Android、手機交互等，涉及的應用領域不可謂不多，因此要想全部掌握或者眉毛胡子一把抓是不太明智的，下面我梳理出一些概要的學習方法，僅供大家參考。
第一：學習工具
工具是第一位的。 一般對于入門階段的人來說，你就不要老是糾結怎么學。先玩透Photoshop，UI設計的工作中最主要的工具就是PS，比方在做一些圖標和界面的時候，PS都是必不可少的。
但是Photoshop有那么多功能需要每一個都學嗎?當然不用，這個后面我們專門找一節慢慢說，在UI設計中ps主要學習也就那幾個工具。
第二：學習UI設計規范
規范就是要刻意練習，規范這個主要還是要練習，沒有太多捷徑可走。
第三：基本的色彩學習
色彩的三要素指的就是色相、明度和純度。這三個分別是什么意思呢?我們可以這樣理解：
1、理解什么是色相
色相指色彩的相貌，不同的波長決定不同的色相，這是大家最直觀感受到的色彩。色相對于色彩是最直接的代表，是色彩的靈魂。
大家大家都知道在光譜中，紅、橙、黃、綠、藍、紫等由于有著不同的波長，帶給我們不同的色彩感受，它們是最基本的色相，其他諸如象牙白、檸檬黃等都是指色彩特定的色相，是人們對不同色相的不同稱謂。有一個地方要注意，黑色和白色是無色相的。
2、理解明度
明度指色彩的明暗程度。明度可以說是色彩的骨架，明度對色彩的結構起著關鍵性的作用。明度具有定的獨立性，它可以離開色相和純度單獨存在，而色彩的色相和純度總是伴隨著明度一起出現的，所以明度是色彩的骨架。
通俗點解釋就是通過色相的加白加黑的一個變化，任何色彩都存在明暗變化的，從明度光譜上可以看到最明亮的顏色是黃色，處于光譜的中心位置。最暗的是紫色，處于光譜的邊緣。
3、理解純度
純度指色彩的鮮艷程度，就是色彩的飽和度、純凈度、彩度。直觀理解就是指色彩的鮮濁程度。純度最高的色彩就是原色，隨著純度的降低，色彩就會變的暗、淡。純度降到最低就是失去色相，變為無彩色，也就是黑色、白色和灰色。
4、學會UI設計中色彩的使用
那么在UI設計過程中色彩該如何去搭配?主要通過4部分來講解。在UI界面設計比例中：用色一般分為主色，次色和輔助色，它們的比例是按照20%-30%、5%-10%和5%來進行配色，通過不同的配色比例讓界面看起來不會出現突?；蛘呤侵鞔尾环值那闆r。
5、進入臨摹階段
了解了具體的知識，最主要的就是練習了，學習技法主要是側重過程，在練習書法時，最好是臨和摹結合起來，各揚其長，各避其短。此外，還要經常讀帖，仔細觀察、分析、體會，可以邊讀邊用手“空臨”。只要功夫下得多了，讀帖和寫字的能力自然會增強，對書法美也體會得更深了。需要聯系臨摹來加強你的技巧，此外，為保存、修復、展覽、出售而取得復制品，側重的是臨摹的結果。因此，臨摹品有商品性質。它流傳于世又產生了偽作和贗作等復雜問題。在世界各國，臨摹一直是學習古典書法或繪畫技法，借鑒和繼承優秀傳統的主要途徑與手段不要想著怎么做，怎么臨摹，學啊~直接打開ps就開始操作，如果不知道怎么臨摹，可以多加幾個大神群去問。 這個階段的就是要：多練和多問
6、學會切圖
之所以需要切圖是因為用戶手中看到的產品界面，并非設計師嘔心瀝血創作的效果圖，而是一個個單獨的切圖經由開發同學技術實現。
切圖作為設計師與開發者之間的橋梁，它的作用很關鍵，合適的切圖、精準的位置可以最大限度的還原效果圖的設計，精妙的切圖更會有事半功倍的效果哦!
好了，大概這幾點，當然這個只是學習UI設計的中的其中一小部分，也是入門的階級。如果你覺得有用，就是今天這一篇最大的目的。
7、習得扁平化思維
扁平化實質就是簡約風格，這種美學的哲學內涵就是：少即是多
扁平化的概念最核心的地方就是:去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等等能做出3D效果的元素。讓"信息"本身重新作為核心被凸顯出來。并且在設計元素上強調抽象、極簡、符號化。扁平化尤其在手機上，更少的按鈕和選項使得界面干凈整齊，使用起來格外簡潔?？梢愿雍唵沃苯拥膶⑿畔⒑褪挛锏墓ぷ鞣绞秸故境鰜?，減少認知障礙的產生。
也就是說做扁平化設計是在做減法，不像之前的擬物化，要考慮到諸多的質感、光影等細膩的地方。所以對于手繪功底不強的設計師來說，只要了解造型和透視關系，對于扁平化圖標繪制就沒有問題。界面過于單調，容易審美疲勞。扁平化設計限制了可采用的元素——
比方說其中就沒有紋理——同時也就限制了內容的表現形式。更何況扁平化的GUI基本都是大色塊堆疊出來，對于設計與制作業提高了不止一倍兩倍的工作效率
8、UI經典設計的借鑒能力
借鑒本身就是創新的一部分，創新的本質就是嫁接和組合，好的UI設計作品非常之多，學活借鑒，有效的、高明的借鑒就會快人一步。
文章來源：中鵬教育http://kc.gdzp.org
第四篇：UI視頻教程之游戲UI設計過程
如今喜歡玩游戲的人在不斷的增加，在日漸緊張的環境和壓力越來越大的工作中人們越來越喜歡忙里偷閑的玩會游戲放松一下，因此如今的游戲UI設計師很是強手。所以現在有越來越多的人對游戲UI設計很感興趣，本篇文章小編就和大家分享一下游戲UI設計過程，下面一起來看一下吧。
UI = User Interface，也就是“用戶界面設計”。打開你過去24小時里玩過的游戲，從登錄界面、操作界面，到游戲道具、技能標志，所有這些設計，統統屬于游戲UI。換句話說，你在玩游戲的過程中一半以上的工夫都在跟UI打交道，它設計得是否巧妙、清晰、流暢，很大程度影響到了你的游戲體驗。
講到這里，肯定有不少UI設計小白開始在網上找關于游戲UI設計制作的各種內容。經過尋找我們會發現這方面的干貨少得可憐。如今互聯網時代處處談分享，既然沒有找到分享的內容我們就自己總結整理一部分吧。飯得一口口吃，路要一步步走。既然想學游戲UI，還是得先從基礎學起。下面簡單講講游戲UI的設計流程，雖然簡單，可句句是干貨。
在開始高大上的游戲UI設計之旅前，你先要明確一個最最基本的概念：游戲UI不是把自己關在小黑屋里，腦袋一拍，想怎么畫就畫出來的。你得先跑到游戲策劃那兒，和對方推心置腹地溝通，了解清楚你要設計的游戲究竟是玩什么、給誰玩、怎么玩。這幾點確定了，才好確定美術風格。比如，你在下手前要先確定游戲的題材、背景年代、質感、整體色調、可用元素等等。要是做一款三國背景的游戲，對話界面竟然跳出腎6的屏幕，如果你是玩家，會不會覺得整個人都穿越了?
確定了設計的主題、風格、背景之后你就進入搭框架階段，從主界面開始一層層深入設計，像是一些常用界面、彈出框、功能按鈕、道具、技能圖標等等，要是連一些雜七雜八的東西再加上游戲Logo也能連帶著一道設計掉，那真是極好的。到這里就可以為每個元素布局并制作草稿了。千萬別想當然，一定要根據用戶操作習慣，規劃好顯示區域、操作區域、執行按鈕區域等。用于展示的圖標不要大于操作圖標，只要能清楚顯示就行。文字的字體樣式和大小也順便敲定，都別超過3種。動態文字用系統默認就夠了，等到中期再看情況做詳細規定。
現在，制作主界面UI以及主要功能按鈕的時機才算成熟，可以正式確立UI整體風格了。根據剛開始設定的信息和原畫圖片，確保UI風格跟原畫風格統一。顏色別整得太花里胡哨，清晰美觀即可，切記一條關鍵原則：哪怕玩你游戲的是從沒玩過游戲的小白，只要他們能分分鐘順著你的思路走下去，你就贏了。好的UI不僅可以讓游戲變得順暢簡單，還能讓整個體驗更上一層樓。
走完上述流程，你只要按照先后順序把模塊一個個地完成，UI設計就大功告成。 現在明白整套流程了嗎?下面給大家分享4條UI設計經驗，都是可以在設計游戲UI時著重考慮的，能不能加分看你的運用水平，但至少能保證你在做UI設計時被少退幾稿。
1、讓你設計的界面簡潔，減少玩家發生選擇錯誤的可能性。
2、UI設計要能一眼看明白，一點就有效。
3、切記切記切記：要保持一致。
4、不管設計得多么花里胡哨，永遠別忘了：這東西是給人用的，如果功能性差其他什么都白搭。
第五篇：什么是UI設計,UI設計前景怎么樣？
發布者:一網學 最后更新時間：2014-11-20 02:03:39
UI設計?
UI即User Interface(用戶界面)的簡稱。UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。很多人把UI設計理解為APP圖標設計顯然是片面的。
以Iphone的鎖屏界面為例。設計師除了要考慮界面的整體美觀，還要讓人不閱讀說明書的情況下，知道如何去操作，一眼便能找到開機的按鈕并且知道去移動，當移動滑塊，機器會發生什么樣的變化，并讓操作者確定已經成功?；瑝K移動到一半放手，又會是什么樣的變化。整個人與機器的交流過程便是人機交互。
如何讓人與機器的交互更加友好，符合人的使用習慣，讓使用者能一步一步的繼續往下操作，便是操作邏輯。
很顯然，中間電量的圖標設計只是整個鎖屏界面設計的一部分。 UI設計為什么這么火?
1、喬布斯及蘋果公司對用戶界面、用戶體驗的重視，推出劃時代的產品并且他如此之成功。讓其他公司也越來越重視。同時用戶的體驗習慣也上到一個新的高度。
2、隨著科技的發展，智能手機、移動設備、智能設備的普及，UI設計必將越來越火。
3、國內一批互聯網巨頭企業對UI的重視，紛紛成立了相關部門，并且引起的人才爭奪，加之從業人員少，UI設計師極度供不應求，工資自然高出你的想象。 為什么UI設計、網頁設計一起學?
從廣義上來講，UI設計包含網頁設計，因為網頁設計也是一個界面，但是大部分時候我們把兩者分開，并且給與不同的稱謂，不管怎么樣，他們在設計原理上有很多相通的地方。
1、UI、網頁一起學對你的設計能力會有互相促進的作用。學UI對你做網頁在交互理解，細節刻畫上都有很大的幫助。學網頁對于你在風格把握，氣氛渲染、效果合成上也有很大幫助。
2、UI、網頁一起學能拓展你的就業面。因為除非大公司，分工非常明確，很多中小企業可能需要你兩者都會。兩者都會你找工作選擇的余地更大
一網學網頁設計UI培訓套餐班就業工資4000起 問題1，你們是如何保證的
答：我們主要從以下幾方面來保證你就業1.市場人才供不應求，即刻學習，占據先機。2.所學即市場所學，學習等于積累工作經驗。3.面試技巧，試用期輔導，讓你底氣十足。 問題
2、4000好像也不多啊 答：作為一家負責人的培訓機構，我們的承諾一定不能有夸大的成分，我們說的4000起，是最低工作為4000，學的好的當然遠遠高于4000，最終拿多少，取決你的努力程度，學員里面高度年薪20w也有。
有個現實也許你不愿面對，或者干脆選擇不相信。但他確實存在。那就是有很多從事UI設計的人，也許只是剛剛畢業，在審美、設計能力上遠遠不如做平面設計的你。但是他的待遇可能是你兩倍。
你還是不相信嗎?
下面我們從幾個最火爆的設計招聘網站(獵聘網、拉勾網)來做分析，我們不做各種設計師待遇的對比，免得大家以為我有選擇性的挑選樣本，這個你可以自己去人才網站上搜索了解。
下面我們僅從這兩個網站彈出關于設計崗位一些信息做側面分析。
這兩個界面出現在在沒有注冊的情況下點擊推廣鏈接后進入的首頁面(我是百度“設計招聘”點擊進入的)。首頁面肯定起到一個營銷的目的，他希望你看到待遇能去注冊，為了讓崗位有吸引力，他當然會把待遇最高的崗位置頂在這個首頁。從這些設計師崗位看，基本都是UI，手機界面、用戶體驗。出現的這些具體崗位未必真實，但是人才網站肯定有龐大的招聘數據，我想選擇讓這些出現在首頁，肯定是基于他們的數據統計做出分析得出的答案。
那為什么ui的職位待遇會這么高呢? 1.他是新型行業，人才供不應求。
物以稀為貴的道理大家都懂，UI設計是伴隨智能手機，移動互聯網這些發展起來的。他起步晚，從事的人數遠遠滿足不了市場需求。這樣很多只要做的還過得去的進去待遇都不會太差。
2.互聯網，移動互聯網企業往往都是拿到一筆很大投資來創業的，他們不求暫時的利潤，更注重市場的占有以及業務的成倍增長。所以更愿意花高薪挖他們所需要的人才。
3.對于互聯網、移動互聯網企業來說，基本的構成無非就是產品經理、ui設計師、運營、市場這幾方面的人才，設計師的重要性遠遠要高于傳統行業。
在我們的常識里面，工資跟經驗、能力掛鉤。經驗越豐富，能力越高。工資肯定也越高。
其實你錯了，在同樣的平臺，同樣的行業會這樣，但是因為行業不同，行業所處階段不同，從業人數與市場需求不同，待遇也不再是能者多得。
你或許美術專業畢業，做平面設計兩三年了。因為待遇不太高。你奮發圖強專研技術，希望不斷提升自己的能力來獲得待遇的提升。但是如果你選擇的方向不對，那豈不是事倍功半。相反選擇從事ui設計，你有平面基礎，轉起來很容易，你付出少許的努力或許就有巨大的改變。
最后再說一句，也許不是你的努力不夠，而是你的選擇錯誤。 大家可以了解下最近專訪學員的故事 從苦逼美工到月薪14000-付海蘭 努力成就的幸運兒-田姍山 二線城市月薪過萬-龐程