什么是UI
要學習UI，先要了解什么是UI瞳氓，這個概念大家打開度娘搜一下策彤，概念就有了。發(fā)展至今匣摘，UI這個詞語從流行到現(xiàn)在店诗，大家都經常聽著，但是很多人分不清這些概念而混淆音榜。請允許我引用一段百度的解釋：UI即User Interface（用戶界面）的簡稱庞瘸。UI設計則是指對軟件的人機交互、操作邏輯赠叼、界面美觀的整體設計擦囊。好的UI設計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適嘴办、簡單瞬场、自由、充分體現(xiàn)軟件的定位和特點涧郊。
導航贯被，按鈕，進度條妆艘，開關等等彤灶，基本都屬于UI的范疇，也是我們日常生活中最常見的UI批旺，從互聯(lián)網的頁面導航幌陕，到各種下載按鈕，點擊按鈕汽煮，或者手機上的WIFI開關搏熄，這些各式各樣的人機交互茅诱，都是UI設計，跟人的生活離不開搬卒。
我們這大多數(shù)人是從平面設計轉的思想去做UI瑟俭，會走入一個誤區(qū)，我們的頁面有時候做的很精美契邀，但是卻很難去使用摆寄，客戶看到視覺部分覺得很炫目，很有所謂的設計感坯门，但是當真正使用的時候微饥，感受卻不那么友好。遇到的問題也是也是比較多的古戴。
用戶不知道這個是什么東西欠橘，有什么作用?
用戶不知道通過這個按鈕或者界面，能達成怎樣的目的?
當用戶有興趣去嘗試的時候现恼，卻不知怎么樣開始?
當用戶開始后肃续，怎么進行下一步，沒有明確的提示?
用戶不想使用的時候叉袍，怎么快速退出?
用戶每個操作始锚，是否會有心理上的愉悅，或者只是覺得很枯燥?
什么是UE
通過以上的一些提問喳逛，我們提出一個概念瞧捌。在使用軟件，或者打開這個頁面的時候润文，我們推崇效率姐呐，但是這個過程如果能讓用戶感到愉悅，同時又不會覺得效率低下典蝌，著就是這就是UED（用戶體驗設計）的事情了曙砂。好的用戶體驗，能讓你的設計變得有個性化赠法，從眾多同類產品頭脫穎而出麦轰。
通過以上的一些提問，我們提出一個概念砖织。在使用軟件，或者打開這個頁面的時候末荐，我們推崇效率侧纯，但是這個過程如果能讓用戶感到愉悅，同時又不會覺得效率低下甲脏，著就是這就是UED（用戶體驗設計）的事情了眶熬。好的用戶體驗妹笆，能讓你的設計變得有個性化，從眾多同類產品頭脫穎而出娜氏。
要做出優(yōu)秀的用戶體驗設計拳缠，我們要定位使用者，使用環(huán)境贸弥，使用方式并且最終為用戶而去設計窟坐。所以界面設計要和用戶研究緊密結合，是一個不斷為使用者提供滿意的視覺設計和操作體驗的過程绵疲。
開始進入我們今天的主題哲鸳，科學的UI必定有一套科學開發(fā)流程。
我學習UI的時間也不長盔憨，不過略有心得徙菠，這里為大家稍微說下。
一個通用的界面設計大體分為五個步驟郁岩，
①了解需求
②做出原型
③視覺前端開發(fā)
④測試優(yōu)化
⑤用戶驗證
了解需求
首先要了解需求方需要做一個什么樣的東西婿奔，有什么功能。然后就是對用戶進行需求分析问慎，你的目標用戶是什么人群脸秽，有什么樣的使用習慣，什么樣的使用環(huán)境等等蝴乔。任何一個要數(shù)的改變都會讓你的設計做出相應的更改记餐。
除此之外，我們還要了解同類型的產品薇正。大家的功能一樣片酝，我們就要做得比他更好，才有存在價值挖腰。從單純的界面美學說哪個好雕沿，哪個不好，不是一個客觀的評價猴仑。我們婉轉點說就是审轮，要做出更適合我們最終用戶的，就是最好的辽俗。
做出原型
當前期工作調查好之后疾渣，我們就要輸出各階段所需要的產品原型了，可以是一個簡單的線框圖崖飘，或者框架需求示意圖榴捡。要同時滿足需求方和用戶的各種解決方案。包括任務流和簡單的頁面交互朱浴。組織評審和討論吊圾。確認一個具體的方案線框圖和必要的說明文檔达椰。如果有確切的需要，可以配合用戶調研项乒，進行可用性測試啰劲。我們都知道，所以問題發(fā)現(xiàn)得越早檀何，對我們開發(fā)者越好蝇裤。改稿這種事情不是大家所期望的。
要做的事情：
1：根據(jù)需求埃碱，畫出框架圖猖辫，跟需求方對框架圖進行評估
2：平衡需求方、用戶砚殿、實現(xiàn)技術啃憎、設計等各方的需求，做出優(yōu)先級似炎，分好主次辛萍。
3：發(fā)現(xiàn)問題后，最好有個多解決方案羡藐。
4：線框圖要做科學點贩毕，別把設計和制作前端給坑了；線框圖要做科學點仆嗦，別把設計和制作前端給坑了辉阶；這個很重要，所以要說兩遍瘩扼。
視覺前端開發(fā)
根據(jù)需求方的品牌形象谆甜，定位用戶設計界面。視覺前端的開發(fā)集绰，我們要跟需求方不斷溝通協(xié)調確認规辱。避免做好出來，才給需求方栽燕，最后才發(fā)現(xiàn)不是他想要的罕袋。這個階段需要跟設計者講解需求，幫助他們準確的時間客戶需求碍岔。
要做的事情：
1：根據(jù)產品定位浴讯，找下市面上有沒有類似的設計風格，找出差異點付秕，進行設計風格的確認
2：開始準備素材兰珍，進行設計
3：設計的過程不斷跟需求方溝通確認需求，對交互設計進行改進
4：和前端開發(fā)人員講解設計要點询吴。設計也不能把前端給坑了掠河。
測試優(yōu)化
產品做出來之后，觀測核心數(shù)據(jù)變化猛计，進行可用性測試和用戶體驗調研唠摹，優(yōu)化版本，修正BUG奉瘤。這一步通常是比較勞心的勾拉，因為整個產品的原型已經制作出來，如果這個時候發(fā)現(xiàn)大的缺陷盗温，改起來就比較費時費力藕赞。
要做的事情：
1：把自己當成用戶，換位思考卖局，去使用產品斧蜕，盡量發(fā)現(xiàn)不足
2：把自己當成用戶，換位思考砚偶，去使用產品批销，盡量發(fā)現(xiàn)不足
用戶驗證
測試改正的產品，我們最終可以把它推向市場染坯。但是這個時候均芽，設計并沒有結束，我們還需要用戶的反饋单鹿，專業(yè)的設計師應該在產品上市后掀宋，去了解最終效果，看看用戶使用的最終感想仲锄，為以后的設計產品累計跟多好的經驗劲妙。
1.清晰是第一目標
清晰是界面第一位也是最重要的目標。只有清楚的知道你設計的界面是什么昼窗，明白為什么要用它是趴，理解界面是如何幫助他們交互的，預測用它會發(fā)生什么澄惊。人們才可能高效的利用它唆途。模糊和迷惑的界面使得用戶連疑問的機會都沒有。清晰的界面帶給用戶自信引導用戶更深層次的使用掸驱。一個復雜凌亂的界面不如分割成多個清晰的界面肛搬。
2.界面是為了交互而存在的
界面是為了人與世界交互而存在的。它幫助我們理解交互毕贼，引導我們使用温赔，將我們和世界聯(lián)系在一起，使我們能夠使用各種服務鬼癣。界面設計不是藝術創(chuàng)作陶贼。界面不是漂亮的風景畫啤贩。界面的功能可以被測量。最好的界面不僅僅有其功能更重要的是啟發(fā)拜秧，喚起痹屹，強化我們和世界的關系。
3.不惜一切保持注意力
我們生活在一個嘈雜的世界⊥鞯現(xiàn)在很難在一個沒有什么東西打擾你或分散你的注意力的地方安靜的閱讀了志衍。注意力很寶貴。不要讓你的設計被干擾注意力的垃圾圍繞聊替。記住什么是你的界面最重要的東西楼肪。如果用戶在閱讀先讓他們完成閱讀再展現(xiàn)廣告。尊重注意力不僅會讓你的用戶感到快樂還會使你的界面更有效惹悄。當使用是終極目標春叫，那么注意力就是必要條件，要不惜一起保持它俘侠。
4.保持用戶的控制力
人類在當他們覺得一切都在掌控中是最舒服。糟糕的軟件使人不舒服央星，強迫用戶進入無計劃的交互操作，令人迷惑的過程和出乎意料的結果莉给。經常監(jiān)測系統(tǒng)狀態(tài)廉沮，描述因果關系，無時無刻不洞察用戶期望以保持用戶控制力叁幢。沒有顯而易見操作方式，再簡單的操作方式都要讓用戶了解曼玩。
5.直接操作是最好的
最好的界面是我們可以像使用現(xiàn)實世界的東西一樣操作的界面窒百。然而黍判，并不是所有的操作方式都有現(xiàn)實的參照，我們設計的界面越來越多的是幫助用戶與各種信息化的東西交互篙梢。界面很容易過度設計柔袁，按鈕臀脏、圖像凡简、選項、窗口榴嗅、附件等等使我們止于操作UI組件而忽略重要的目的。相反震糖，努力接近直接操作的原始目標录肯，盡可能少的留下設計的痕跡趴腋，盡可能多的使用人類自然手勢吊说。理想的界面設計是使用戶可以僅用注意力就可以直接操作的輕量的設計。
6.一個界面一個主要動作
我們設計的每一個界面都應該提供用戶真正價值的唯一的動作优炬。這樣使用戶更易于學習颁井、使用。如果一個界面不止一個主要動作很快會令人迷惑蠢护。就像一篇文章要有一個主題雅宾。保持次要動作在主要動作之后，就像一篇文章的重點并不是因為可以在Twitter上分享而是可以被人閱讀和理解葵硕。
7.提供一個自然的下一步
很少有僅一步的交互操作眉抬，所以你要為你的每個界面設計下一步交互操作。設想下一步應該是怎樣的再設計出來懈凹。就像我們談話一樣蜀变，先拋出一個話題再把它引向深入。不要讓用戶做完你設計的操作后陷于迷茫介评。提供一個自然的下一步幫助用戶完成目標库北。
8.形式追隨功能
符合用戶預期的行為會使用戶感到舒服。不管是人们陆，動物杂腰，物體還是軟件保持與預期一樣的行為會讓人覺得與其有良好的關系喂很。為此設計元素應該保持行為和外觀的一致預期恤筛。也就是說，用戶可以僅憑界面元素的外觀就可以預測它會有什么樣的功能煎殷。如果有一個按鈕的外形就應該有按鈕的功能劣摇。
9.一致性問題
按照上一原則來說末融，不同功能的界面元素外形也應該不一樣。那么一樣功能的界面元素在外形上應該保持一致巧婶。這兩者一樣重要艺栈。當應該使用不同的視覺處理時湾盒，設計新手往往為了在努力保持一致而模糊差異使用相同的視覺處理诅需。
10.清晰的視覺層次會更好
一個界面上的視覺元素如果有清晰的視覺秩序的話堰塌，那么它就會形成良好的視覺層次。也就是說蚪战，用戶每次看到同樣的元素會有同樣的秩序邀桑。孱弱的視覺層次會讓用戶不知道該看哪最終感到困惑和混亂贼急。在多變的情況下很難保持清晰的視覺層次，因為視覺重心是相對的空闲，如過所有的東西都是重點那就沒有重點了。如果一個單一的視覺重心元素要加到界面中去跌榔，設計師應該重新布局視覺元素以達到合理的視覺層次矫户。遺憾的是，大多數(shù)人并沒有意識到清晰的視覺層次會使你的設計更好芥挣。
11.合理的組織以減少認知負荷
合理的組織可以以少勝多空免。理清設計中各種內容的關系，可以幫助用戶更好更快的理解你的界面坝咐。相同的元素放置在一起墨坚，用位置和方向顯示自然的關系。合理的組織元素可以減少用戶的認知負荷帽撑，應為你已經幫他理清各種元素的關系了亏拉。不要強迫用戶去認知专筷，用你的設計自然的展現(xiàn)磷蛹。
12.用色彩來強調庇勃，但是不要毫無變化
物體的顏色會隨著光照的變化而變化槽驶。正午和黃昏時樹的顏色會有很大的不同罕拂。正如現(xiàn)實世界多彩的顏色一樣爆班，界面上的顏色也不應該一成不變。顏色可以強調引導用戶的注意力雨涛，但是不應該是唯一不同的東西凉泄。給長時間的閱讀的界面加上點淡淡或者亞光的背景色旧困，減少原始顏色的飽和度。當然拗盒，只要對你的用戶是適合的陡蝇，增加鮮艷的顏色也未嘗不可广匙。
13.逐步展現(xiàn)
每個界面只展示必要的信息，如果要讓用戶做出選擇分唾，請給用戶足夠多的信息绽乔，在隨后的界面展示細節(jié)。避免過分解釋或者一次展示所有東西的趨勢鞍爱。可能的話专酗，按需要逐步展示信息。這樣會使你的設計更清晰盗扇。
14.幫助用戶進入情境
理想的界面是不需要額外的幫助的祷肯，因為界面本身可以引導用戶學習和使用。現(xiàn)實情況下可采用情境內的幫助疗隶，并且只在需要時展示佑笋。讓用戶在幫助中尋找他們想要的答案是把負擔加在用戶身上。在需要的時候內建幫助很好斑鼻，只要確保不阻礙熟練用戶的使用就可以了蒋纬。
15.初始狀態(tài)是個關鍵點
對一個界面的第一印象十分重要，卻經常被設計師忽視。為了更好的幫助用戶上手，我們應該用心設計什么都沒發(fā)生的初始狀態(tài)食听。初始狀態(tài)不應該是白板一塊民珍，它應該用戶以提示和引導。絕大部分對界面的誤解發(fā)生在初始情境，一旦用戶掌握了規(guī)則鞍恢，他們離成功就不遠了警绩。
16.看不見的設計最偉大
好設計的奇特特性就是用戶不會感覺到它是被精心設計的。原因之一就是成功的設計會使用戶專注于自己的目標而忽略界面。完成目的之后的滿足感使他們不需要考慮其他的掖蛤。對于設計者來說這很殘酷垢袱，因為我們的好設計卻得不到任何夸獎。但是偉大的設計師滿足于好用的設計并且知道滿意的用戶經常會很安靜。
17.按其他設計準則來做
視覺、平面、字體量承、廣告、信息架構酗失，所有這些領域的設計準則都可以用來指導界面設計。不要輕視這些準則菱涤，從它們中汲取營養(yǎng)如迟。尋找其他未觸及的領域痒玩，想想我們可以從出版，編程堕战，裝幀甚至滑板，消防嘶窄，空手道中學到什么。
18.界面因被使用而存在
大多數(shù)準則歸結為一點：界面被用戶使用就是成功的速种。就像漂亮的椅子坐著不舒服一樣姜盈，用戶不用再漂亮的設計也是失敗的。因此配阵，界面設計更多的是創(chuàng)造舒適的使用環(huán)境而不是創(chuàng)造一個值得使用的藝術品馏颂。界面僅僅滿足設計者的審美是不夠的，它必須是可用的棋傍。
**?點擊"圖片"按鈕,?顯示大圖
需求分析:
問：&1.點擊圖片之后就放大圖片的功能的步驟是什么？
1>創(chuàng)建一個和屏幕一樣大小的半透明UIView,?用來遮蓋整個界面
2>需要把“圖片按鈕”,?放置在coverView的前面
3>將圖片按鈕放大
4>將這些操作放在block動畫當中瘫拣。
問：&2.黑色半透明的背景圖片是一個什么控件亿絮？點擊灰色背景后需要做哪些操作？
解析：是一個按鈕麸拄，因為需要監(jiān)聽點擊事件做事情派昧。
1.?讓"圖片按鈕"通過動畫的方式回到原來的位置
2.?讓"半透明背景"通過動畫的方式透明度變成0,?然后從父容器中移除
*?實現(xiàn)思路（步驟）:
1>?添加一個"陰影"按鈕,?因為該"陰影"要實現(xiàn)點擊,?所以用"按鈕”。??設置半透明?來作為蒙版
2>?然后再把"頭像按鈕"顯示在"陰影”上面拢切。 ?這個屬性可以讓這張圖片任何時候都是顯示在最上面:
3>?通過動畫的方式改變"頭像按鈕"的frame(位置和尺寸)變成大圖效果蒂萎。
**?注意:?如果圖片沒有變大,?檢查是否沒有取消"自動布局(Auto Layout)"
選中圖片—>點擊文件屬性—>Interface Buider Document—>去到"Use?Auto Layout”的勾
**再來實現(xiàn)?點擊"遮罩陰影",?回到小圖的功能
#??-—>這里是因為后面也要給蒙版創(chuàng)建點擊事件,然而蒙版是臨時創(chuàng)建的,外部方法還不能直接訪問,所以這里可以先在外部定義一個全局屬性,然后在蒙版創(chuàng)建后賦值給這個屬性,這樣就可以在方法中操作調用了
//定義臨時蒙版的屬性,最后把創(chuàng)建的臨時蒙版賦值給這個屬性
@property(nonatomic,weak)UIButton?*tempMengBanView;
###注意:這里使用的是weak弱引用, ? 這樣用的原因是,在下面把這個按鈕添加到了根視圖,已經間接的強引用了(addSubview就表示強引用),所以這里不需要再用強引用,
需求分析:
蒙版的點擊事件之后,我們需要做什么:
1>?通過動畫慢慢將"遮罩陰影"的透明度變?yōu)?
2>?通過動畫慢慢將"頭像圖片"的frame修改為原來的位置
3>?在動畫執(zhí)行完畢后,?移除"遮罩陰影”
//ViewController.m//01_猜圖游戲#import"ViewController.h"#import"DXQuestion.h"@interfaceViewController ()
@property (nonatomic, strong) NSArray*questions;//記錄icon button的原始的frame@property (nonatomic, assign) CGRect iconFrame;@property (nonatomic, weak) UIButton*coverView;@end@implementationViewController
//點擊了大圖按鈕- (IBAction)didClickShowBigImageButton:(UIButton *)sender {//0. 記錄 btnIcon 的frameself.iconFrame =self.btnIcon.frame;//1. 創(chuàng)建一個和屏幕一樣大小的半透明UIView, 用來遮蓋整個界面UIButton *coverView =[[UIButton alloc] init];
coverView.backgroundColor=[UIColor blackColor];
coverView.alpha=0.0;
coverView.frame=self.view.bounds;//為半透明背景添加一個單擊事件[coverView addTarget:self action:@selector(didClickCoverView:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:coverView];
self.coverView=coverView;//需要把"頭像按鈕", 放置在coverView的前面[self.view bringSubviewToFront:self.btnIcon];//2. 講頭像按鈕（圖片按鈕）放大CGFloat iconW =self.view.bounds.size.width;
CGFloat iconH=iconW;
CGFloat iconX=0;
CGFloat iconY= (self.view.bounds.size.height - iconH) *0.5;
[UIView animateWithDuration:0.5animations:^{
coverView.alpha=0.6;
self.btnIcon.frame=CGRectMake(iconX, iconY, iconW, iconH);
}];
}//點擊了"半透明背景"按鈕- (void)didClickCoverView:(UIButton *)sender {//1. 讓"頭像按鈕"通過動畫的方式回到原來的位置[UIView animateWithDuration:0.5animations:^{
self.btnIcon.frame=self.iconFrame;//2. 讓"半透明背景"通過動畫的方式透明度變成0, 然后從父容器中移除self.coverView.alpha =0.0;
} completion:^(BOOL finished) {
[self.coverView removeFromSuperview];
}];
}//點擊了下一題按鈕- (IBAction)didClickNextQuestionButton:(UIButton *)sender {//1. 切換題目的顯示[self nextQuestion];
}//點擊了中間的圖片按鈕- (IBAction)didClickIconButton:(UIButton *)sender {//根據(jù)是否已經創(chuàng)建了coverView, 來決定是應該放大還是縮小if(self.coverView ==nil) {//放大[self didClickShowBigImageButton:nil];
}else{//縮小[self didClickCoverView:self.coverView];
}
}
這樣整個過程就完成了,
