Zi 字媒體

今天和大家分享的是UI的基礎概念，作為UI設計師都是必須知道的。一起來看看吧。 一、UI的相關概念 1、UI即User Interface(用戶界面)的簡稱。 用戶界面指人和機器互動過程中的界面，以手機為例，手機上的界面都屬於用戶界面，我們通過對這個界面向手機發出指令，手機根據指令產生相應的反饋。設計這套界面是覺得人就稱為UI設計師。在設計師領域，在PC端從事網頁設計的人我們成為WUI(Web User Interface)設計師或者網頁設計師。在移動端從事移動設計的人，我們稱為GUI(Graphics User Interface)。一般情況下，小企業不會分那麼清楚，都統一稱呼UI設計師，反正產出的都是界面，都需要對產品的界面視覺負責。 2、UE即User Experience(用戶體驗) UED即User Experience Design(用戶體驗設計) 用戶體驗指用戶在使用產品過程中的個人主觀感受，一般要關注用戶使用前，使用過程中和使用后的整體感受，包括行為、情感和成就等各個方面。 用戶體驗設計就不光是對前期的用戶體驗方面做打算，他們需要用自己的知識、經驗、設計能力拿出設計方案，自從2006年淘寶把設計部門稱為UED之後，國內很多企業跟風把設計部分也改為UED。但是很多UED團隊名不符實，團隊中甚至沒有獨立設置用戶體驗研究的職位，這個職位可能就是產品人員或者界面設計師承擔了。 到產品層面上，用戶體驗包含以下幾點： *產品性能：產品是否夠快、是否穩定、是否占很多的系統資源等。 *產品內容：產品的內容是否可以為用戶解決一定的問題，是否達到了用戶需求，解決了用戶的癢點。 *產品交互：交互是否流暢，用戶是否能快速準確的找到自己想要的功能。 *產品界面：界面的風格是否統一、整齊、給用戶帶來高質量的感覺。 二、UI的學習方法 很多想學UI的北鼻們，一開始都會問一個問題「不會畫畫還能不能學UI?」其實學習UI不需要你一定有美術基礎的，當然你有美術基礎更好。但是如果你沒有但是你又想從事這個職業，那必須有審美，有色彩感。可以多看一些基礎類知識，知識應該了解物體的透視、光照射的角度、在對應的形狀中表現出怎樣的明暗分佈等。 1、圖形基礎 美術生基礎課就是三門： 素描、速寫、色彩 2、軟體的應用 *Adobe photoshop，簡稱「PS」，一款老牌像素處理軟體，各個設計行業圖形處理都會用到，可以滿足UI界面設計的日常需要。 *Adobe illustrator，簡稱「AI」，是矢量軟體，在處理一些複雜的圖形路徑時，可以考慮使用。一般在AI中繪製圖標然後潛入PS中。 *Adobe After Effects，簡稱「AE」，現在扁平化設計成為主流，所以動效也就比較流行。 *Ps Play，是一個通過Wi-Fi網路，實時在終端設備上預覽電腦上Photoshop的設計稿，可同步調試及截圖保存到移動終端，並可以通過Email、微信等工具即時分享的跨終端應用。 *MarkMan，是一款標註軟體，在移動設計中設計師要對自己設計的圖進行標註切圖。 3、設計規範 一般設計的應用是基於IOS系統和Android系統運行。這兩個系統都有其官方的系統規範，這些規範都羅列了詳細的通用型設計框架。如各自系統狀態欄、各個系統下的尺寸、導航欄和標籤欄的高度是多少、手機屏上最適字型大小是多大等。這個後面會具體說啦。 4、臨摹學習 現在有很多設計網站，要多利用業餘時間去臨摹。比如站酷、UI、dribbble、behance等等，設計這個東西每天都在發生著變化，你只有每天去看最新的設計師作品，才能跟上時代潮流，走上人生巔峰。 5、參與項目 經歷一套完整的設計流程是最好的學習鍛煉方式。從一開始的討論原型圖到出設計效果圖，再到標註切圖給開發者。效果圖不斷導出到手機上預覽，核對電腦的設計稿和手機上預覽的差距，你會從實踐中不斷提高。也可以通過假設的設計項目，也就是Redesign(再設計)，比現有比較火的app重新構造做設計稿，同時能把自己設計思路完整展現說明出來。之前有過這樣的案例，某設計師不滿意Facebook的界面，按自己的想法重新設計了界面，並在設計網站上展示，由於二次設計的效果出色，還吸引了Facebook的注意，最終收到了Facebook的Offer。 課程一裡面我們大概了解了UI的定義和一些前期的準備。那今天我們就真正的走進移動UI設計了。 一、什麼是App APP是英文Application的簡稱，指運行在手機系統上的應用程序軟體，比較著名的App商店有Apple的iTunes商店，Android的Android Market，諾基亞的Ovi store，還有Blackberry用戶的BlackBerry App World，以及微軟的應用商城。目前主流智能手機的操作系統還是iOS和Android。其他智能手機系統份額非常小，我們可以先忽略不計。我們需要掌握好這兩種系統的應用界面設計知識。 二、App的開發流程 UI設計只是整個應用開發的一個環節，如果你想更好的展開設計工作，就需要掌握App開發維護整個流程 *產品經理(Product Manager)：一般負責收集需求、整理需求、商務溝通等工作，他會根據產品的生命周期，協調設計、研發和測試還有運營。最終產出低保真的原型說明文檔(也就是線框圖)表達產品的流程、邏輯、布局、視覺效果和操作狀態等。 *交互設計(User experience design)：會繼續深入這個低保真原型，一般企業產品經理承擔了這個工作。如果有專門的交互設計，他更多的會考慮用戶流程、信息框架、交互細節和頁面元素等。有些企業會讓其做出高保真的原型，高保真原型是無限接近最終效果圖的線框圖，表達產品的流程、邏輯、布局、視覺效果和操作狀態等。 *視覺設計(User Interface)：終於到我們了，拿到無論是低保真還是高保真原型圖，我們不僅僅是美化界面。我們要對原型有深入的了解，需要了解整個頁面的邏輯，從全局的角度來做視覺設計。好的UI不僅是讓產品變得個性有品味，還要讓產品操作變得舒適、簡單、自由、充分體現產品的定位和特點。最終產出物是各種圖片、界面標註和界面切圖。 *程序開發：程序員根據設計圖搭建界面，根據產品提供的功能說明文檔去開發功能，最終產出物是可使用的應用。 *測試：產品完成之後，還需要測試人員測試應用，主要分為單元測試、真機測試、功能測試、測試跟蹤和出測試報告。 *運營：運營人員就是需要通過各種手段提升應用的人氣，同時把用戶反饋的問題提供給產品人員，然後產品人員再次發起應用的版本迭代。 三、智能手機的屏幕 我們常看到手機介紹中一堆的參數，說實話，在這之前我都搞不太清楚。比如：手機屏幕是多少?手機的解析度是多少?是否是高清視網膜屏幕等等。所以我們先了解一些常見的相關於屏幕的概念。 1、英寸(Inch) 英寸一般為1in=2.54cm，如果你不知道2.54cm是多長的話你可以看看你大拇指，大概就是你一節大拇指的長度。很多圖紙、銘牌上都是使用英寸作為長度單位。手機屏幕、電視機也繼承了這個計量單位。 iPhone4s的屏幕尺寸是3.5英寸，表示屏幕斜對角線的長隊。喬布斯認為3.5英寸是人類單手持設備的最佳尺寸。但是隨著時代的發展，人們每天願意花幾個小時在手機上面雙手操作，它漸漸變成了內容消費和娛樂的主要平台。3.5英寸的手機已經滿足不了大家的需求，所以現在手機屏幕越來越大化。 手機常見屏幕尺寸有3.5英寸、4.3英寸、4.7英寸和5.5英寸。為什麼會選擇這幾個尺寸?因為手機屏幕使用的玻璃是一整塊生產的，然後切割成一塊一塊的。利用率與成本直接相關，為了獲得最優的玻璃切割利用率，避免浪費。 以後再看到英寸，知道多大了吧。 2、像素(Pixel) 我們圖片放大，能看到許多色彩相近的小方點，這些小方點就是像素點，像素是圖像的基本採樣單位，它不是一個確定的物理量，因為像素的大小詩不確定的。 3、解析度(Resolition) 解析度就是屏幕像素的數量，一般用屏寬像素乘以屏高像素表示。比如iPhone6的屏幕解析度是750*1334，也就是說它是由750列和1334行的像素點排列組成。通常情況下，圖像的解析度越高，所包含的像素就越多，圖像就越清晰，印刷的質量也就越好。同時，它也會增加文件佔用的存儲空間。以上由絲路教育http://www.silucg.com/?lx整理提供更多資源請關注微信公眾號：silujy