輸血規(guī)范和流程

經(jīng)典word整理文檔，僅參考，雙擊此處可刪除頁眉頁腳。本資料屬于網(wǎng)絡(luò)整理，如有侵權(quán)，請聯(lián)系刪除，謝謝！輸血規(guī)范和流程素材源自網(wǎng)絡(luò)UI設(shè)計(jì)需要學(xué)什么？需要學(xué)習(xí)的內(nèi)容主要包括工具軟件的使用和設(shè)計(jì)思維的培養(yǎng)。①工具軟件主要使用PS、Ai，輔助使用A某ure、AE等軟件。關(guān)于軟件的使用方法，可以網(wǎng)上找一些相關(guān)圖文或視頻教程來學(xué)習(xí)，最好是［基礎(chǔ)實(shí)例教程］，像30天學(xué)會photohop、50天學(xué)會maya等這類教程就不用看了，因?yàn)榧冘浖挤ń坛虥]有太大意義，一定要結(jié)合基礎(chǔ)實(shí)例分析。②設(shè)計(jì)思維如果將做設(shè)計(jì)比作成練武功，設(shè)計(jì)技法是拳腳招式，設(shè)計(jì)思維就是內(nèi)功心法了。優(yōu)秀的設(shè)計(jì)都有其內(nèi)功心法作為支撐，那內(nèi)功怎么修煉呢？看書！給大家推薦三類書。③設(shè)計(jì)心理學(xué)第一類，基礎(chǔ)類：設(shè)計(jì)師人人都會讀，例如《設(shè)計(jì)中的設(shè)計(jì)》《設(shè)計(jì)心理學(xué)》《簡約至上》《Don’tMakeMeThink》，如果你沒有讀過，也可以當(dāng)作知識普及來讀。第二類，排版類：例如《版式設(shè)計(jì)》《設(shè)計(jì)元素》《版式設(shè)計(jì)原理》《西文字體》。設(shè)計(jì)的呈現(xiàn)最終還是落腳到每個頁面，每個點(diǎn)，每根線。排版的能力還是需要大家好好學(xué)習(xí)的。第三類：心理類：例如《游戲改變世界》《無價》《烏合之眾》等。關(guān)于人性／認(rèn)知／激勵／動機(jī)／群體這些心理學(xué)知識也會對設(shè)計(jì)有所幫助。關(guān)于自學(xué)①自學(xué)的好處：第一：可以鍛煉主動學(xué)習(xí)的習(xí)慣和自學(xué)能力，學(xué)習(xí)時間長短、進(jìn)度、難易度可自主把控；第二：自學(xué)可以節(jié)省學(xué)費(fèi)、交通費(fèi)、生活費(fèi)等很多的費(fèi)用開銷，減輕經(jīng)濟(jì)壓力。②自學(xué)的不足：第一：人際方面閉塞，缺少與人交流溝通的機(jī)會，學(xué)習(xí)中遇到的困難可能需要花費(fèi)很長的時間才能解決，甚至無法有效的解決；需要高度的自我意識，不可三天打魚，兩天曬網(wǎng)；第二：很難系統(tǒng)的學(xué)習(xí)UI設(shè)計(jì)的知識體系和經(jīng)驗(yàn)技巧，容易走很多彎路。今天分享給大家的是如何定義一套設(shè)計(jì)語言。來自來自UI中國優(yōu)秀會員-ky的經(jīng)驗(yàn)總結(jié)。設(shè)計(jì)語言，貌似很火的一個詞，無論是國內(nèi)大的團(tuán)隊(duì)還是小的團(tuán)隊(duì)，都需要做設(shè)計(jì)規(guī)范，好像沒有就不夠?qū)I(yè),UED的價值就不夠高，關(guān)于設(shè)計(jì)語言的參考也特別多，最出名的莫過于蘋果和谷歌，也是設(shè)計(jì)語言的鼻祖。為什么需要設(shè)計(jì)語言上圖，應(yīng)該是很多設(shè)計(jì)團(tuán)隊(duì)都遇見的情況，一個按鈕很多尺寸，顏色，大小，有時候我們已經(jīng)有了規(guī)范，但是由于業(yè)務(wù)方各種要求，要個性化，要不一樣，導(dǎo)致整個APP設(shè)計(jì)變的很混亂，這是我們設(shè)計(jì)中經(jīng)常遇見的，很多APP因?yàn)槿鄙倩A(chǔ)規(guī)范，導(dǎo)致APP界面每個頁面都不一樣，設(shè)計(jì)師都是按照個人的主觀經(jīng)驗(yàn)做設(shè)計(jì)，導(dǎo)致風(fēng)格層次不齊，缺乏統(tǒng)一性，所以對內(nèi)，很多時候設(shè)計(jì)語言是為了解決統(tǒng)一性和效率為前提下，避免開發(fā)工程師重復(fù)開發(fā)一些組件。對外對外，統(tǒng)一的品牌符號，品牌特征，有助于加深產(chǎn)品在用戶心中的印象，統(tǒng)一的顏色和交互形式能幫助用戶加深對產(chǎn)品的熟悉感和信任感，一個好的設(shè)計(jì)語言本身可以在體驗(yàn)上為產(chǎn)品加分，試想一下，當(dāng)你走進(jìn)星巴克的時候，發(fā)現(xiàn)LOGO變了，咖啡的包裝換了，是不是會覺得是山寨的感覺，就好比漢堡某某，雖然都是同樣的薯?xiàng)l漢堡，但是總感覺是山寨，好的品牌規(guī)范，能夠更好創(chuàng)見一致性的體驗(yàn)。設(shè)計(jì)語言解決什么問題一致性在整個平臺中創(chuàng)造一致性，顏色、按鈕、字體、品牌一致性，給用戶安全感與熟悉感，同時解決設(shè)計(jì)師因?yàn)閭€人特征導(dǎo)致界面不統(tǒng)一問題。明確設(shè)計(jì)原則讓每一個設(shè)計(jì)師很清楚的知道，我們產(chǎn)品需要傳遞給用戶的設(shè)計(jì)特征和原則是什么，以及整個平臺的約束是什么，比如我們平臺特征是年輕，活潑，那么我們有對應(yīng)的設(shè)計(jì)規(guī)范，比如圓角按鈕，漸變色。設(shè)計(jì)師就得在這個約束下去進(jìn)行設(shè)計(jì)，就不能設(shè)計(jì)成直角或方正的圖形，因?yàn)楹驼麄€設(shè)計(jì)原則不匹配。效率提升效率，對于一些我們經(jīng)常用到的組件、顏色、分割線、按鈕、圖標(biāo)、字體、tab、表單等組件，如果提前設(shè)計(jì)統(tǒng)一好，能大大減少重復(fù)性設(shè)計(jì)，能讓設(shè)計(jì)師更加專注在設(shè)計(jì)品質(zhì)上加強(qiáng)，提升效率，對于基礎(chǔ)的顏色、字體、間距可以提前開發(fā)好，減少重復(fù)性開發(fā)。多平臺統(tǒng)一我們現(xiàn)在處于一個各種設(shè)備的時代，各種屏幕尺寸，平板電腦，筆記本，各種安卓機(jī)器，各種廠商自定義的系統(tǒng)等等，我們的設(shè)計(jì)需要在這些平臺上運(yùn)行，就必須保證設(shè)計(jì)的統(tǒng)一性。設(shè)計(jì)語言包含哪些內(nèi)容前面我們已經(jīng)說了，設(shè)計(jì)語言的重要性以及設(shè)計(jì)語言解決了什么問題，那么到底設(shè)計(jì)語言里面應(yīng)該包含哪些內(nèi)容，我們應(yīng)該如何去定義這些內(nèi)容呢？1.設(shè)計(jì)原則Airibnb在建立他們設(shè)計(jì)語言之前，先根據(jù)整個產(chǎn)品公司定位，價值觀，先得出他們整一個設(shè)計(jì)語言的關(guān)鍵詞:統(tǒng)一：每個設(shè)計(jì)應(yīng)該是統(tǒng)一的，不能有太多個性差異化的特征；關(guān)于內(nèi)容：用戶應(yīng)該更多關(guān)注的是內(nèi)容，而非設(shè)計(jì)本身；確定的：在設(shè)計(jì)中減少不確定的因素，和預(yù)期。同樣的，在facebook的設(shè)計(jì)原則語言里面，也首先強(qiáng)調(diào)了他們的設(shè)計(jì)價值觀：通用，人性，干凈，統(tǒng)一，有用，快速，透明，在facebook所有設(shè)計(jì)中，都圍繞這幾個點(diǎn)去作為他們設(shè)計(jì)指導(dǎo)準(zhǔn)則。蘋果設(shè)計(jì)規(guī)范，建議每一個接觸UI的同學(xué)都應(yīng)該去學(xué)習(xí)，蘋果的設(shè)計(jì)規(guī)范包括：完整性，一致性，直接操作，反饋，隱喻，用戶控制等。所以我們在建立一個設(shè)計(jì)語言的第一步，先應(yīng)該建立一個設(shè)計(jì)準(zhǔn)則，關(guān)于設(shè)計(jì)準(zhǔn)則如何定義，我會在后面的文章里面和大家詳細(xì)講解。2.色彩系統(tǒng)設(shè)計(jì)中三大元素，色彩，字體，圖形，那么第一步我們在建立一個系統(tǒng)時候，色彩是很重要一部分，我們需要定義好我們整個系統(tǒng)的色彩架構(gòu)體系，色彩體系一旦建立好，后面我們的設(shè)計(jì)都將圍繞這些色彩進(jìn)行設(shè)計(jì)，色彩包括：品牌色、輔助色、字體黑白灰顏色、不可用顏色、超鏈接顏色、成功或失敗顏色等等。▲主色盤▲輔助色盤▲色盤延伸3.圖形▲圖形，設(shè)計(jì)中很重要元素之一，我們插畫風(fēng)格圖形如何定義，圖標(biāo)，背景圖形都屬于圖形一部分?！瀹嬙谠O(shè)計(jì)運(yùn)用類型有幾種，比如atlaian對于他們插畫類型進(jìn)行了規(guī)范，插畫需要有隱秘和故事性在里面，插畫必須有構(gòu)建的感覺，定義了人物特征以及顏色規(guī)范。▲包括對于空白頁圖形定義▲對圖標(biāo)風(fēng)格定義，包括色彩關(guān)系▲對于頭像，定義了有五官和無五官風(fēng)格定義▲包括整個規(guī)范的正確示范和錯誤示范等等▲圖標(biāo)規(guī)范等等4.柵格系統(tǒng)柵格是為了保證頁面中更好的布局，保證布局統(tǒng)一性。柵格系統(tǒng)里面又分最小單位和間距，在airbnb中對于間距，他們運(yùn)用了8的倍數(shù)，所有的規(guī)范都是很有彈性的，8，16，24，48，64來建立。▲網(wǎng)格系統(tǒng)中的列,也有叫欄▲網(wǎng)格系統(tǒng)中的行▲網(wǎng)格系統(tǒng)中的水槽▲網(wǎng)格系統(tǒng)中的邊距5.字體界面中出現(xiàn)最多的內(nèi)容字體，字體除了傳統(tǒng)意義上大小之外，還有字間距、行間距、字重對比、字體顏色等等，后面系列文章中，我會詳細(xì)告訴大家如何定義字體?！种兀櫭剂x就是字體粗細(xì)，通過字重可以加強(qiáng)層級▲字體大小以及運(yùn)用場景，字體在界面中什么樣場景運(yùn)用多大字號，以及對應(yīng)的字間距，行間距等等都是需要我們?nèi)ザx的。▲字體顏色，什么時候用品牌色，成功，錯過，超鏈接出錯等等各個狀態(tài)的顏色如何去定義，后面文章我會詳細(xì)說明。6.投影在設(shè)計(jì)系統(tǒng)中我們需要定義好投影關(guān)系，投影需要去定義不同的強(qiáng)度大小，以滿足頁面中需要，一般通過透明度，以及投影遠(yuǎn)近來定義。7.圖文關(guān)系圖片和文字在界面中如何處理，多色調(diào)如何運(yùn)用，黑色圖片上放文字怎么處理，白色圖片放文字如何處理都是需要我們?nèi)ピ敿?xì)定義的?？偨Y(jié)設(shè)計(jì)一套設(shè)計(jì)語言是一個很復(fù)雜的過程，前期一般需要比較資深的的設(shè)計(jì)師來完成，設(shè)計(jì)完成后，對于基礎(chǔ)的顏色，字體不要經(jīng)常變動動，成本會比較高，至少需要保證這些基礎(chǔ)元素，一年內(nèi)不要頻繁變動，今天和大家分享的只是一個大概框架，后續(xù)我將會拆解里面每個模塊，逐步和大家分享如何去設(shè)計(jì)一個語言。UI設(shè)計(jì)師做什么的，需要學(xué)什么？對UI設(shè)計(jì)作了這樣的定義：“UI即UerInterface(用戶界面)的簡稱，UI設(shè)計(jì)是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)?！蔽覀円话闼f的UI設(shè)計(jì)多指UI視覺設(shè)計(jì)，主要負(fù)責(zé)APP、Web、H5等頁面的色彩、布局、icon、字體方面的設(shè)計(jì)工作。但隨著互聯(lián)網(wǎng)的不斷發(fā)展，純視覺的工作已經(jīng)開始日益減少，行業(yè)要求UI設(shè)計(jì)師也要懂點(diǎn)交互設(shè)計(jì)和產(chǎn)品方面的知識