如何成為手機ui設(shè)計師

　　一個成熟的設(shè)計規(guī)范，一定離不開精確的經(jīng)過多次調(diào)試的數(shù)據(jù)。一個優(yōu)秀的手機UI設(shè)計師，必定也是從一個普普通通的UI設(shè)計師慢慢轉(zhuǎn)變的，經(jīng)手過大大小小上千上萬個設(shè)計才能積累下豐富的設(shè)計經(jīng)驗，才能根據(jù)需求快速設(shè)計出滿意的作品。小編帶大家來學(xué)習(xí)一下手機UI設(shè)計的相關(guān)知識。

　　挑戰(zhàn)和制約：每個媒體都有它的局限所在。即使是在移動端這個充滿機會、自由和創(chuàng)意的平臺上也有著許多亟待解決的問題，和無法回避的局限性。
 

　　碎片化的移動端：不同的智能終端不僅僅尺寸不盡相同，而且因為分辨率的差異使得屏幕的像素密度也有很大差異，往細了考慮，這些終端的輸入機制、屏幕比例、屏幕方向都會影響到移動端的UI設(shè)計。移動端的網(wǎng)頁設(shè)計可以借助響應(yīng)式設(shè)計保證不同屏幕下的瀏覽體驗，相比之下移動端的APP設(shè)計則相對缺少流動性。所以，作為移動端的UI設(shè)計師，還是需要考慮屏幕差異造成的布局設(shè)計的不同以及用戶體驗上的變化。
 

　　分裂的操作系統(tǒng)平臺：每個操作系統(tǒng)都有它們自己的一套設(shè)計規(guī)范，交互方式，程序接口，而隨著操作系統(tǒng)的版本更新，這些東西也都有著各自的變化。
 

　　設(shè)計和構(gòu)建一個APP的方式會直接影響到它的性能。手機里安裝的程序如果設(shè)計的好可以你的手機可以待機一天半，而如果其中有一個程序設(shè)計的有問題，會讓你需要出門多帶一個移動電源。一些不必要的轉(zhuǎn)場動畫可能會讓你的CPU為之進行密集地運算，一段存在問題的JS代碼可能讓你的瀏覽器耗費多于平常數(shù)倍的電量。設(shè)計和開發(fā)，都會影響到APP的性能，甚至左右手機的續(xù)航。
 

　　拋棄思維定勢
 

　　學(xué)校教育和實際設(shè)計開發(fā)上的“時代差異”，讓很多設(shè)計師對數(shù)字化的互聯(lián)網(wǎng)的認知稍顯“靜態(tài)”，甚至形成某種思維定制，對于移動互聯(lián)網(wǎng)也知之甚少。在這個信息爆炸的時代，激烈的競爭催化下的移動互聯(lián)網(wǎng)正在以一種恐怖的速度演化、推進，這使得設(shè)計師們需要緊跟發(fā)展的步伐，隨時更新升級自己對于互聯(lián)網(wǎng)的認知。
 

　　從構(gòu)思屏幕布局到考慮界面轉(zhuǎn)換
 

　　當(dāng)涉及手機UI設(shè)計的時候，單單考慮屏幕布局是遠遠不夠的。優(yōu)質(zhì)移動APP向我們證明了界面間的轉(zhuǎn)場動畫到底能讓一個UI界面產(chǎn)生怎樣的張力。而Android L所用的Material Design則更是在看似普通的靜態(tài)界面之后，隱藏了一系列讓你欲罷不能的過度效果。界面轉(zhuǎn)換之間的動效，在過去只為博得一笑，今天卻正在走向主流，成為移動端的用戶體驗的核心。它正在成為交互和界面的重要元素，賦予界面以韻律和生命力。動效不僅呈現(xiàn)運動的過程，還能表現(xiàn)出空間、層次，變化，在基礎(chǔ)的界面結(jié)構(gòu)上為用戶帶來截然不同的體驗。
 

　　你不需要將界面做獨特或者原創(chuàng)，尤其是當(dāng)你是為了獨特而重新設(shè)計所有的界面，然后讓整個產(chǎn)品為獨特而擔(dān)上風(fēng)險。很多時候，堅持使用原生UI元素和模式是讓應(yīng)用能按時出貨的重要保證。比起強行推動獨特原創(chuàng)的設(shè)計，很多時候更合適的做法是打造簡單高效的交互界面，創(chuàng)造真正的品牌價值。
 

　　然而，想要學(xué)習(xí)手機UI設(shè)計新技能需要：
 

　　了解平臺：正如同web設(shè)計師需要了解HTML/CSS一樣，作為移動端UI設(shè)計師的你應(yīng)該了解移動端APP的架構(gòu)。首先移動端開發(fā)的語言和網(wǎng)頁設(shè)計就不太一樣，各個不同平臺有著各自的編程語言和接口，界面的構(gòu)成也無法使用CSS和標(biāo)簽來實現(xiàn)。深入閱讀官方的開發(fā)文檔，明白APP的構(gòu)成，編譯方式，發(fā)布方式，了解設(shè)計的規(guī)則。這些東西不僅關(guān)系到你的應(yīng)用開發(fā)好壞，還會影響系統(tǒng)的穩(wěn)定性，電池續(xù)航長短等多種因素。
 

　　了解移動端的技術(shù)構(gòu)成：了解位置服務(wù)(wifi，GPS等)，藍牙(低功耗藍牙技術(shù))，信號，前后攝像頭，麥克風(fēng)，陀螺儀，位置傳感器，加速度傳感器，指紋掃描儀(iPhone 5s)，眼動追蹤技術(shù)，語音識別，人臉識別，等等等等。每一個新技術(shù)的背后以為著應(yīng)用程序更多的可能性，交互設(shè)計、使用體驗，甚至商業(yè)模式。
 

　　發(fā)掘本地UI組件的開發(fā)潛質(zhì)：每個移動操作系統(tǒng)中中總有著大量的本地UI組件，他們有著極大的自由度，方便你進行定制。你需求確切地知道他們的特征(尺寸，大小，功用)，你可以為與你合作的開發(fā)者節(jié)省大量的工作時間。
 

　　了解移動端的工作流程：安裝SDK并運行，了解移動開發(fā)框架，比如TubyMotion、Xamarin、Titanium。熟悉集成開發(fā)環(huán)境，因為這其中包含了移動開發(fā)所需的方方面面。
 

　　了解移動端的界面模式：三大移動平臺之間，有著相似之處，但是在深入探究他們的交互設(shè)計，會發(fā)現(xiàn)它們在理念上的巨大差異。作為一個設(shè)計師，你需要明白這些差異所在，以及它們是如何體現(xiàn)在實際案例中的。
 

　　記錄并解釋你的UI設(shè)計：考慮到屏幕截圖并不足以表現(xiàn)UI全部的特性，你需要學(xué)會記錄界面不同的狀態(tài)、轉(zhuǎn)變過程、轉(zhuǎn)場動畫等信息，并且學(xué)會記錄界面對于不同狀況的反饋。
 

　　在設(shè)計階段踐行精益UX設(shè)計：一個現(xiàn)代的設(shè)計師應(yīng)該是具備戰(zhàn)略眼光的設(shè)計師。你的目標(biāo)不能局限于悶頭制作漂亮的界面，你應(yīng)該讓你的設(shè)計與團隊合作結(jié)合到一起，切合項目需求。洞悉用戶深層次的需求，并且能快速地隨之反饋到設(shè)計上。將設(shè)計作品保存下來并附上詳細的說明，確保所有的設(shè)計都與核心理念保持一致，與用戶需要保持一致。
 

　　在開發(fā)階段采用敏捷UX設(shè)計：你不能只將高保真的模型交給開發(fā)者就了事，因為在開發(fā)過程中會不斷提出新的需求?？倳兄翱紤]不周全的情況，需要在開發(fā)階段進行補充完善，設(shè)計師需要隨之進行快速響應(yīng)。所以，在這個階段，設(shè)計師真的需要坐在開發(fā)者旁邊應(yīng)付突發(fā)情況。確保開發(fā)者在碰到新的需求的時候，不用他們自己來補充UX的細節(jié)，或者再來找設(shè)計師。
 

　　手機UI設(shè)計的小技巧
 

　　響應(yīng)式設(shè)計：在移動端，響應(yīng)式設(shè)計并非是放之四海皆準的解決方案。有時候它非常適用，但是有的時候并非如此。你有責(zé)任考量什么時候采用專門的解決方案，什么時候需要做響應(yīng)式設(shè)計。
 

　　謹慎使用CSS和JS：CSS動畫，漸變，陰影都非常贊，也非常容易實現(xiàn)。視差網(wǎng)頁看起來也很酷，很多設(shè)計師都對此感興趣。但是這些元素都非常消耗資源，對移動端的瀏覽器會產(chǎn)生很大的負荷，進而影響電池續(xù)航。適度控制CSS特效和JS動效都是很有必要的。即便低性能手機上瀏覽器可以良好地支持CSS3選擇器，但是性能的瓶頸會讓整體體驗非常差。
 

　　像素密度
 

　　大部分的app和移動端網(wǎng)頁，在各種尺寸的屏幕上都能正常顯示。屏幕是由很多像素點組成的。之前提到那么多種分辨率，都是手機屏幕的實際像素尺寸。每個點發(fā)出不同顏色的光，構(gòu)成我們所看到的畫面。而手機屏幕的物理尺寸，和像素尺寸是不成比例的。像素密度這項指標(biāo)是連接數(shù)字世界與物理世界的橋梁。
 

　　Pixels per inch，準確的說是每英寸的長度上排列的像素點數(shù)量。1英寸是一個固定長度，等于2.54厘米，大約是食指最末端那根指節(jié)的長度。像素密度越高，代表屏幕顯示效果越精細。
 

　　倍率與邏輯像素
 

　　以1倍的mdpi作為基準。像素密度更高或者更低的設(shè)備，只需乘以相應(yīng)的倍率，就能得到與基準倍率近似的顯示效果。Android設(shè)備的邏輯像素尺寸并不統(tǒng)一。比如兩種常見的屏幕480x800和1080x1920，它們分別屬于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到邏輯像素為320x533和360x640。即使有倍率的存在，各種Android設(shè)備的顯示效果仍然無法做到完全一致。真正決定顯示效果的，是邏輯像素尺寸。單位決定了我們的思考方式。在設(shè)計和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。
 

　　無論畫布設(shè)成多大，我們設(shè)計的是基準倍率的界面樣式，而且開發(fā)人員需要的單位都是邏輯像素。所以為了保證準確高效的溝通，雙方都需要以邏輯像素尺寸來描述和理解界面。
 

　　實際應(yīng)用
 

　　要把單位設(shè)置成邏輯像素。打開PS的首選項——單位與標(biāo)尺界面，把尺寸和文字單位都改成點(Point)。這里的點也就是pt，無論設(shè)計iOS、Android還是Web應(yīng)用，單位都用它;調(diào)節(jié)倍率，則通過圖像大小里的DPI來控制。這個DPI，其實就是PPI，像素密度。有個常識大家都知道，屏幕上的設(shè)計DPI設(shè)成72，印刷品設(shè)計DPI設(shè)成300;由于1英寸是固定長度，每1英寸有多少個像素點決定了畫質(zhì)清晰程度，DPI達到300以上，其細膩程度就會給人真實感，像真實世界中的物件。最早的圖形設(shè)計是在mac電腦上進行的，mac本身的顯示器分辨率就是72。PS中把圖像DPI也設(shè)成72，就能保證屏幕上顯示的尺寸和打印尺寸相同，便于設(shè)計。
 

　　移動端的尺寸比PC端復(fù)雜，關(guān)鍵就在倍率。但也正因為倍率的存在，把大大小小的屏幕拉回到同一水平線，得以保證一套設(shè)計適應(yīng)各種屏幕。
 

　　交互設(shè)計規(guī)則適應(yīng)手機端
 

　　交互設(shè)計的五大要素：
 

　　目標(biāo)群設(shè)計(Goal-driven Design)
 

　　為你的目標(biāo)用戶群做設(shè)計。像調(diào)研或者訪談形式的用戶研究，能幫助你塑造目標(biāo)用戶群的人物特征。這可以讓你為用戶目標(biāo)定制app的工作流程，以滿足他們的需求。
 

　　可用性(Usability)
 

　　如果用戶認為你的app很復(fù)雜，那么他們肯定不會從App Store下載?？捎眯詴尞a(chǎn)品變得有用，這也是成為希望的第一步。
 

　　功能與標(biāo)識(Affordance & Signifiers)
 

　　標(biāo)識是功能的提示作用。比如，帶下劃線的藍色文本的顯示，你會知道點擊它會跳轉(zhuǎn)到別處 。使用正確的標(biāo)識，讓用戶不用花費時間去考慮每個UI元素的用途。
 

　　易學(xué)(Learnability)
 

　　你希望用戶本能的知道如何使用的界面。這是設(shè)計模式的用場，在后文中我們將會說到。熟悉的模式能夠讓用戶很容易地適應(yīng)新的app。
 

　　反饋與響應(yīng)時間(Feedback & Response Time)
 

　　反饋讓用戶知道一個任務(wù)完成與否。它可以是一個很簡單的蜂鳴聲，又或是復(fù)雜一點的模態(tài)窗口。請確保您的意見是友好的，人性化，并通過尼爾森諾曼集團規(guī)定的時間內(nèi)指導(dǎo)響應(yīng)。
 

　　用戶群
 

　　屏幕尺寸不是手機設(shè)計中的唯一約束，用戶也形成了界面約束的基礎(chǔ)，所以，在創(chuàng)建針對目標(biāo)群app的第一步是要了解你的用戶。

　　UX設(shè)計過程中的三個基本策略：
 

　　角色
 

　　角色是從你的目標(biāo)用戶的預(yù)期行為塑造虛構(gòu)人物，它將幫你決定app需要什么來運營。
 

　　用戶場景
 

　　場景會模擬用戶會干什么。隨著用戶場景，你就可以設(shè)計出最適合他們的UI以及他們的想要達成的效果是怎樣。
 

　　體驗地圖
 

　　在這里你可以了解所有的單一交互中的會出現(xiàn)的條件。體驗地圖繪制的每個步驟都是用戶在APP中可能經(jīng)歷的。它可以幫助你了解所有步驟發(fā)生時用戶的情感和周圍的情況。
 

　　原型圖
 

　　在勾畫原型之前，用書面大綱的形式先表現(xiàn)可以幫助你更清楚的摸索最重要的部分——內(nèi)容。在內(nèi)容基礎(chǔ)上建立流程能讓你對頁面的總數(shù)有一個更精確的評估，接下來為app每一頁流程都繪制一張草圖。然后將紙上的草圖剪出來形成紙上原型，或用工具生成數(shù)字原型。大綱可以幫助您快速了解不同頁面的流程;草圖將APP的布局和結(jié)構(gòu)的詳細信息融入流程中;快速原型可以幫助你測試這些用戶的想法。
 

　　兩種常見的交互設(shè)計模式：
 

　　手勢
 

　　觸摸設(shè)備的定義由手勢決定。觸摸，滑動，雙擊，捏和縮放正在成為用戶的第二自然反應(yīng)。
 

　　動畫
 

　　加入動作能使用戶專注于用戶界面。元素消失與元素滑出的視線也是有差的，前者是缺失;后者是之后還可以供用戶使用。當(dāng)動畫與手勢相結(jié)合，又有了更深度的體驗。手機的交互模式更有助于選取通用界面元素的布局。
 

　　漸變和陰影
 

　　扁平化是現(xiàn)今的設(shè)計趨勢，但不意味著陰影和漸變都沒了。當(dāng)設(shè)計按鈕，切換等視覺效果，你必須考慮使用陰影。通過擴展陰影梯度，使UI設(shè)計更自然的呈現(xiàn)給用戶。您可以使用陰影和漸變創(chuàng)建3D按鈕和輸入形式框，使元素出現(xiàn)嵌入和擴展的效果。
 

　　我們來看下相關(guān)的元素
 

　　嵌入式元素：輸入字段，按鈕觸動，滑塊軌道，未選中的單選按鈕，復(fù)選框。
 

　　外顯元素包括：未按下按鈕，滑塊按鈕，下拉控件，選擇單選按鈕，彈出窗口。
 

　　看過扁平化設(shè)計趨勢的現(xiàn)在與未來，使用半扁平化設(shè)計解決嵌入和外顯元素會更為安全。
 

　　分享四款UI設(shè)計師手機上必裝的幾款配色參考APP。
 

　　Palette — 一款設(shè)計愛好者會喜歡的取色 APP (Android)
 

　　Palette 的中文意思調(diào)色板。它能夠?qū)⒁粡垐D片里的突出顏色和顏色代碼提取出來，從而方便你學(xué)習(xí)其中的配色方案以及獲得配色靈感。主要功能是取到一張圖的色彩，然后返回一系列顏色，可供我們選擇設(shè)置我們的文本顏色，背景顏色，從而達到界面的一致性。很適合插畫師和前端工程師快速提取顏色搭配代碼的一款安卓APP。
 

　　Pixolor — 一鍵拾取屏幕色彩，設(shè)計師高效工作利器(Android)
 

　　Pixolor 是一款 Android 平臺下的屏幕取色應(yīng)用,它能夠在屏幕上懸浮一個圓形放大鏡,其中包含顏色信息與像素坐標(biāo)。Pixolor 可以精確地查看手機圖片對應(yīng)的像素的顏色，它有一個浮動在屏幕上的取色盤用來獲取色彩信息和像素信息，以后不用擔(dān)心手機圖片上傳到電腦會失真。
 

　　RealHex (iOS)
 

　　RealHex 作為一個拾取顏色并記錄顏色參數(shù)值的應(yīng)用，不僅僅是設(shè)計師，畫家，攝影師的專利，任何人都可以創(chuàng)造性地使用它。大自然的世界具有天然的和諧配色：選取一處風(fēng)景，對景物取色，形成的配色方案可以運用在平面設(shè)計，室內(nèi)設(shè)計，網(wǎng)頁設(shè)計中，相比去配色網(wǎng)站尋找現(xiàn)成的配色方案。
 

　　FABRIKA – 自制裝飾藝術(shù)(iOS)
 

　　Fabrika 并不算是一個純粹的配色工具，同時FABRIKA也是一款專門設(shè)計制作壁紙的APP, 它的色彩選擇和搭配功能特別好，所以將它推薦給設(shè)計師或插畫師?？梢园阉?dāng)做是一款風(fēng)格特異的繪圖軟件，雙擊空白畫紙即可選擇圖案的色板，繼而再選取圖案的形狀，可以同時選擇多種。
 

　　學(xué)會軟件技能從來都不是目的，都是為了設(shè)計出滿意的作品，在一些便捷快速繪圖的軟件的幫助下，不只是手機UI設(shè)計師，所有的UI設(shè)計師，都有了更多思考的時間，更多的用思維考慮與用戶之間的關(guān)聯(lián)，怎么設(shè)計出用戶需要以及滿意的作品，能得到用戶的認可才是對一個作品好不好的最好證明。