目的：UI設(shè)計(jì)的目的是為了更好服務(wù)用戶仅财；能讓用戶快速完成自己的目標(biāo)；
UI設(shè)計(jì)的發(fā)展趨勢(shì)：全鏈路和復(fù)合化的設(shè)計(jì)人才。
設(shè)計(jì)師的能力模型：
設(shè)計(jì)能力很重要的兩個(gè)評(píng)價(jià)點(diǎn)：
1、凸顯產(chǎn)品調(diào)性；
2、為用戶解決什么問題齿兔；
P6等級(jí)的設(shè)計(jì)師，市場(chǎng)價(jià)值在15k左右础米；能力構(gòu)成如下：
可以看到溝通能力有意識(shí)的在設(shè)計(jì)溝通、設(shè)計(jì)闡述上多鍛煉自己屁桑；
視覺產(chǎn)出（主要考核項(xiàng)目） ?溝通闡述（輔助考核該項(xiàng)目） 行業(yè)影響力（參考增分價(jià)值）
高頻問題：談?wù)勀阒肮镜漠a(chǎn)品設(shè)計(jì)流程医寿；（考察是否設(shè)計(jì)走過一個(gè)閉環(huán)，產(chǎn)品式設(shè)計(jì)是否嚴(yán)謹(jǐn)蘑斧，看到設(shè)計(jì)師的推動(dòng)價(jià)值靖秩，在原有不足的情況下）
需求方（需求分析完善轉(zhuǎn)化）－》需求評(píng)審－》交互原型（交互原型設(shè)計(jì)）－》review－》視覺設(shè)計(jì)（視覺解決方案）－》review－》設(shè)計(jì)交付（設(shè)計(jì)驗(yàn)證）
需要了解以下內(nèi)容，主動(dòng)推進(jìn)去了解內(nèi)容：
需求方：
產(chǎn)品盈利方式竖瘾、競(jìng)品分析沟突、C/B端訴求、新項(xiàng)目背景 ??
方法：SWH需求分析體系捕传、用戶畫像
交互：
可用性測(cè)試惠拭、MVP原則、原型測(cè)試
方法：尼爾森可用性原則乐横、KANO模型求橄、奧卡姆剃刀原理、交互易用性葡公、馬斯洛需求層級(jí)理論
視覺：
風(fēng)格推倒罐农、視覺競(jìng)品分析；
方法：交叉分析催什，設(shè)計(jì)需求優(yōu)先級(jí)涵亏，UI設(shè)計(jì)樣式細(xì)則：格式塔、菲茨定律、席克定律气筋，2/8法則拆内，黃金法則；
驗(yàn)證：
量化與驗(yàn)證宠默；eg）某個(gè)關(guān)鍵數(shù)據(jù)的點(diǎn)擊量
視覺可用性（eg顏色對(duì)應(yīng)的情緒值麸恍、用戶使用是否流暢）、GSM數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)（顏色顏值搀矫、但主要看轉(zhuǎn)換率是否變高抹沪，數(shù)據(jù)反饋）、答辯與復(fù)盤
視覺產(chǎn)出（主要考核項(xiàng)目）
1瓤球、專業(yè)設(shè)計(jì)能力（設(shè)計(jì)流程融欧、高效高質(zhì)量輸出、整體風(fēng)格定義（前中后三個(gè)板塊卦羡、不是對(duì)原型做彩色化））
2噪馏、分析、解決能力（設(shè)計(jì)判斷力(改版前后視覺變化：推動(dòng)了什么绿饵，有什么改變欠肾，對(duì)用戶來說有什么感觸)、規(guī)范應(yīng)用/總結(jié)/推廣拟赊、設(shè)計(jì)深度/廣度）
以上設(shè)計(jì)閉環(huán)董济；
設(shè)計(jì)有職責(zé)來監(jiān)督、反思做出有價(jià)值的設(shè)計(jì)要门；
思考：為什么你的界面是最佳方案之一；你的理論依據(jù)是什么廓啊；視覺方案是什么欢搜？首頁(yè)的功能目的是什么？卡片流是什么谴轮？
沒有設(shè)計(jì)理論點(diǎn)支撐很難做好一個(gè)設(shè)計(jì)炒瘟；
想讓設(shè)計(jì)有價(jià)值：我們要非常清楚地知道：什么是設(shè)計(jì)的價(jià)值；?
設(shè)計(jì)價(jià)值：通過視覺表現(xiàn)的方式第步，助力業(yè)務(wù)拿結(jié)果（顏值提升疮装、體驗(yàn)提升、數(shù)據(jù)提升）的能力粘都；上面說的解決：1廓推、凸顯產(chǎn)品調(diào)性；2翩隧、為用戶解決什么問題樊展；通過（1）了解市場(chǎng)、了解發(fā)展趨勢(shì)（2）前期分析（設(shè)計(jì)前），分析需求背景专缠，為什么在這個(gè)節(jié)點(diǎn)之下有這個(gè)需求雷酪，需求解決了什么問題（3）設(shè)計(jì)細(xì)節(jié)（設(shè)計(jì)中），設(shè)計(jì)精度高涝婉，UI樣式上的細(xì)節(jié)點(diǎn)哥力，設(shè)計(jì)方式、用色墩弯、icon 的精細(xì)度吩跋、banner和app的整體搭配；（4）設(shè)計(jì)驗(yàn)證（設(shè)計(jì)后）用到視覺可用性最住、GMS等方法驗(yàn)證（良反饋性）（5）動(dòng)效體系（最不重要的一步）分析了以上幾點(diǎn)才能突顯產(chǎn)品調(diào)性和用戶需要的東西钞澳；
所以設(shè)計(jì)闡述要有以上3個(gè)點(diǎn)。
eg）首頁(yè)：功能點(diǎn)目的：流量分發(fā)涨缚，快速引導(dǎo)用戶進(jìn)入2級(jí)頁(yè)面轧粟；
圖標(biāo)設(shè)計(jì)規(guī)范：
1、整體尺寸
2脓魏、頁(yè)面頁(yè)邊距
3兰吟、顏色對(duì)應(yīng)的屬性
4、頁(yè)面呼吸感茂翔，圖標(biāo)內(nèi)外環(huán)eg）90px外環(huán)混蔼、56px內(nèi)環(huán)，配比為0.618的黃金分割比珊燎；
所以設(shè)計(jì)有基礎(chǔ)的視覺表現(xiàn)惭嚣，有非常多的細(xì)節(jié)點(diǎn)；表現(xiàn)產(chǎn)品的業(yè)務(wù)屬性悔政；結(jié)合理論支撐晚吞；色彩試用依據(jù)；頁(yè)面邊距的使用原則谋国；
eg）美團(tuán)的首頁(yè)： ?第一排是主要功能槽地，使用頻次高；第2芦瘾、3排使用頻次比較低捌蚊，屬于輔助類；
設(shè)計(jì)能力廣度和深度
廣度：設(shè)計(jì)方案的精細(xì)程度近弟、可延續(xù)性
深度：可用性強(qiáng)（使用流暢）缅糟、品牌感、商業(yè)分析透徹
作業(yè)：5WH藐吮，分析設(shè)計(jì)溺拱；
設(shè)計(jì)能力3大構(gòu)成：
1逃贝、視覺產(chǎn)出（主要考核項(xiàng)目），面試一般是迫摔，上面的6個(gè)問題點(diǎn)沐扳！
2、溝通闡述（輔助考核項(xiàng)目）
3句占、行業(yè)影響力（參考增分價(jià)值（對(duì)行業(yè)沪摄、對(duì)自己的團(tuán)隊(duì)、設(shè)計(jì)文章自己的見解為了總結(jié)））
兩個(gè)分享：eicodesign 和IXDC
能力模型
1纱烘、量化設(shè)計(jì)價(jià)值
2杨拐、良好的職業(yè)規(guī)劃
3、建立設(shè)計(jì)高度
三個(gè)重點(diǎn)板塊：專業(yè)設(shè)計(jì)擂啥、分析解決能力哄陶、溝通能力；
P5: 承擔(dān)多平臺(tái)項(xiàng)目哺壶，設(shè)計(jì)創(chuàng)新并融合現(xiàn)有規(guī)范屋吨，多方案產(chǎn)出能力，緊跟設(shè)計(jì)趨勢(shì)山宾，且具備沉淀能力
多方案：iOS至扰、Android、Web ? ? Android和web10%-20% ?资锰； ? 多方案的理論支持敢课；
P6: 保持以上，且不低于競(jìng)品绷杜，數(shù)據(jù)有明顯改善或良好口碑直秆，不出現(xiàn)對(duì)設(shè)計(jì)質(zhì)量投訴，將風(fēng)格&體驗(yàn)創(chuàng)新融入產(chǎn)品
不低于競(jìng)品：視覺層面鞭盟，且關(guān)注數(shù)據(jù)
e.g.）淘寶詳情頁(yè)怎么優(yōu)化 ??
1切厘、設(shè)計(jì)細(xì)節(jié) ? 2、布局合理
P7: 保持以上懊缺，且進(jìn)行設(shè)計(jì)理論支撐，深入理解產(chǎn)品發(fā)展趨勢(shì)培他，熟悉競(jìng)品方式與策略鹃两，并合理應(yīng)用在公司產(chǎn)品
熟悉競(jìng)品方式與策略（借鑒競(jìng)品），當(dāng)競(jìng)品已經(jīng)把用戶體驗(yàn)建立起來舀凛，我們沒有必要完全和它習(xí)慣不同俊扳。比如淘寶，用戶已經(jīng)習(xí)慣淘寶的模式猛遍，全新的行為模式習(xí)慣會(huì)讓用戶不適應(yīng)馋记。
專業(yè)行業(yè)經(jīng)驗(yàn)
行業(yè)壁壘建設(shè)
eg）美團(tuán)：從單一業(yè)務(wù)向多元化擴(kuò)張号坡，用高難度的經(jīng)營(yíng)復(fù)雜度防御對(duì)手。
問：“如何提升自己的行業(yè)壁壘梯醒？”
答：精準(zhǔn)匹配能力模型＋非軟件樹提升＋復(fù)合方向的分析層面（設(shè)計(jì)前中后）
問：做一款類似淘寶的應(yīng)用宽堆，你會(huì)怎么做？說出你的做法茸习？如何做到差異化畜隶？
答：P5: 分析視覺細(xì)節(jié)，形成規(guī)范 ??P6: 使用數(shù)據(jù)支撐 ?p7: 如何做好首頁(yè)的核心作用： 流量分發(fā);布局是夠合理号胚；
商品圖片：突出產(chǎn)品的品牌感籽慢、一定要清晰； 商品屬性
分析解決問題
P5: 高效的進(jìn)行設(shè)計(jì)方案輸出猫胁，良好提案能力箱亿，熟悉相關(guān)設(shè)計(jì)規(guī)范，并可延續(xù)弃秆，駕馭設(shè)計(jì)風(fēng)格并加以推進(jìn)
設(shè)計(jì)方案輸出：設(shè)計(jì)出發(fā)點(diǎn)是什么届惋、如何衡量好壞、設(shè)計(jì)思路是什么驾茴？
分析視覺細(xì)節(jié)盼樟，形成規(guī)范
p6:保持以上，且用數(shù)據(jù)及專業(yè)準(zhǔn)確的判斷力锈至，幫助團(tuán)隊(duì)進(jìn)行設(shè)計(jì)方向推進(jìn)晨缴，主導(dǎo)定制高標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范，并有效知道團(tuán)隊(duì)成員執(zhí)行峡捡，活動(dòng)數(shù)據(jù)對(duì)比復(fù)盤击碗，總結(jié)經(jīng)驗(yàn)，對(duì)比各項(xiàng)數(shù)據(jù)们拙，分析數(shù)據(jù)升降原因稍途。
對(duì)比復(fù)盤，總結(jié)經(jīng)驗(yàn)：改版前后砚婆，到底有什么變化械拍。看數(shù)據(jù)是否升降装盯。布局上推動(dòng)了什么坷虑？突顯改變了什么？在閱讀成本上對(duì)用戶來說有什么感觸埂奈？eg）推動(dòng)了布局更加精簡(jiǎn)迄损。改變了主次分明，關(guān)注的重點(diǎn)狀態(tài)變得明顯账磺。使用戶閱讀成本降低芹敌。
使用數(shù)據(jù)支撐app
單個(gè)按鈕單個(gè)用戶等訪問情況可以和開發(fā)提需求痊远，加入埋點(diǎn)。
行業(yè)性的資料：在易觀智庫(kù)上氏捞，有很多行業(yè)數(shù)據(jù)碧聪；
p7:保持以上，主導(dǎo)團(tuán)隊(duì)專業(yè)人才培養(yǎng)計(jì)劃幌衣，以及團(tuán)隊(duì)成長(zhǎng)項(xiàng)目建設(shè)
人才培養(yǎng)：多幫助別人矾削，自己成功，也能幫助他人進(jìn)步豁护，希望我們的大家庭能互幫互助哼凯。
如何做好首頁(yè)的核心作用：流量分發(fā)
分析解決問題
P5: 能準(zhǔn)確無誤、簡(jiǎn)練的表達(dá)自己的觀點(diǎn)楚里，有效傾聽和理解對(duì)方断部，證觀點(diǎn)，格式清晰規(guī)范班缎，掌握3-5人小型會(huì)議蝴光。
p6: 保持以上，切掌握多種溝通技巧达址，找到雙方目標(biāo)共同點(diǎn)蔑祟，進(jìn)行跨團(tuán)隊(duì)溝通，達(dá)成共同目標(biāo)沉唠，掌握15人中型會(huì)議疆虚。
p7: 保持以上，且能分析溝通對(duì)象的心理特點(diǎn)满葛、文化層次径簿、興趣愛好、采取相應(yīng)的溝通方法和手段嘀韧、調(diào)整形式和內(nèi)容篇亭，能夠通過與高層協(xié)調(diào)和溝通，去獲取必要的資源和支持锄贷，并能獲得高層認(rèn)可译蒂，掌握50人以上的大型會(huì)議。
以上可以牢記谊却；
不同的產(chǎn)品設(shè)計(jì)流程
設(shè)計(jì)師隨著公司等級(jí)發(fā)揮不同的價(jià)值蹂随；
設(shè)計(jì)眼中的三種公司類型：
創(chuàng)業(yè)公司：幫助產(chǎn)品做出決策（我的理解：多方面解決的問題的能力）
發(fā)展中公司：提升設(shè)計(jì)產(chǎn)能（我的理解：思考公司發(fā)展戰(zhàn)略）設(shè)計(jì)規(guī)范，快速完成模版化的內(nèi)容
成熟公司：品牌調(diào)性因惭、小步快走（我的理解：成為行業(yè)帶頭、引領(lǐng)新風(fēng)尚）首頁(yè)金剛區(qū)
如何助力產(chǎn)品決策绩衷？
eg）一個(gè)創(chuàng)新產(chǎn)品蹦魔、金融支付工具激率。老板／業(yè)務(wù)方：我們希望改版首頁(yè)從而給用戶更好的產(chǎn)品體驗(yàn)。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 傾聽產(chǎn)品側(cè)勿决、加工設(shè)計(jì)側(cè)
從需求層（明確設(shè)計(jì)的本質(zhì)）－－－－－－－－－》設(shè)計(jì)層（需求分析乒躺、轉(zhuǎn)化設(shè)計(jì)決策）
用戶：想要什么 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?設(shè)計(jì)支撐：理論支撐
產(chǎn)品：想凸顯什么
怎么設(shè)計(jì)都覺得不對(duì)時(shí)，有可能是原型產(chǎn)品構(gòu)架出了問題低缩？反過來思考需求層嘉冒，幫助產(chǎn)品分析，推動(dòng)產(chǎn)品咆繁，想用戶薅羊毛的本質(zhì)讳推，增加黏性支撐喝使用場(chǎng)景支撐。
eg）改版品牌墻：改版前玩般，排序亂用戶無感银觅，有些品牌陌生；改版后：理論支撐是按照客單價(jià)高－低坏为、訂單量高－低究驴，把頻次高的品牌放在前面，提高用戶的熟悉感從而提升產(chǎn)品親和度以及點(diǎn)擊率匀伏。
正確的產(chǎn)品設(shè)計(jì)流程
改版淘寶界面洒忧；
淘寶界面從上到下：banner、首頁(yè)選擇金剛區(qū)够颠、UGC咨詢區(qū)熙侍、瓷片區(qū)；
深層次分析：淘寶是個(gè)什么產(chǎn)品摧找？電商－－－》
1核行、如何提升用戶轉(zhuǎn)化率 ? ?2、如何更佳定制化蹬耘、匹配用戶
群體劃分：用戶群1: 24歲學(xué)生小李 ?（牛仔芝雪、簡(jiǎn)約、透氣） ??用戶群1: 26歲白領(lǐng)小美 （太陽(yáng)鏡综苔、小點(diǎn)心惩系、裙子）
首頁(yè)對(duì)應(yīng)推送相關(guān)內(nèi)容慨丐、也就是現(xiàn)在淘寶在做的魯班系統(tǒng)趴泌，目的是為了滿足千人千面的不同需求、定制化產(chǎn)品复局；
產(chǎn)品定制化杨刨，千人千面：
A：給100萬用戶推送1000種首頁(yè)晤柄；
B：給100萬用戶推送相同首頁(yè)；
設(shè)計(jì)價(jià)值：
通過視覺的表現(xiàn)的方式妖胀，助力業(yè)務(wù)拿結(jié)果的能力芥颈。（結(jié)果：顏值提升（好看的界面）惠勒、體驗(yàn)提升（定制化）、數(shù)據(jù)提升（符合購(gòu)買偏好））爬坑；
產(chǎn)品設(shè)計(jì)流程：
需求宣講纠屋、原型設(shè)計(jì)、交互評(píng)審盾计、視覺設(shè)計(jì)售担、設(shè)計(jì)評(píng)審、開發(fā)上線
方法論：
5WH產(chǎn)品分析署辉、用戶畫像族铆、場(chǎng)景分析、設(shè)計(jì)精細(xì)度涨薪、UI設(shè)計(jì)樣式骑素、Kano模型、視覺可用性刚夺、GSM數(shù)據(jù)驅(qū)動(dòng)
最終導(dǎo)向都要?dú)w于設(shè)計(jì)：讓設(shè)計(jì)更合理
產(chǎn)品階段：戰(zhàn)略定義献丑、需求規(guī)劃 （設(shè)計(jì)分析）
設(shè)計(jì)階段：交互設(shè)計(jì)、視覺設(shè)計(jì)侠姑、設(shè)計(jì)驗(yàn)證 （設(shè)計(jì)執(zhí)行）
開發(fā)階段：開發(fā)上線创橄、數(shù)據(jù)跟蹤（設(shè)計(jì)跟蹤）
拓展：阿里巴巴：五導(dǎo)家
產(chǎn)品環(huán)節(jié)：
（1）產(chǎn)品需求定制：不做原型彩色化，而是做產(chǎn)品的“始作俑者”
（2）查看業(yè)務(wù)數(shù)據(jù)：明確設(shè)計(jì)目標(biāo)莽红，如果沒有就推動(dòng)做
交互環(huán)節(jié)：
（1）交互稿的共同確認(rèn)：原型定稿前妥畏，UI要適當(dāng)參與交互原型評(píng)審
（2）可用性測(cè)試：站在用戶的角度，檢測(cè)功能門檻安吁、易用性
跟主流競(jìng)品頁(yè)面布局交互保持一致
目的是：1醉蚁、接得住競(jìng)品流失的用戶2、減少用戶學(xué)習(xí)成本鬼店；
eg）修改支付頁(yè)面：提高優(yōu)惠券點(diǎn)擊率（1）可以加大按鈕（2）弱化其他視覺（3）提升優(yōu)惠券層次
產(chǎn)品環(huán)節(jié)：
（1）產(chǎn)品需求定制：競(jìng)品是誰网棍？長(zhǎng)什么樣子？
（2）查看業(yè)務(wù)數(shù)據(jù)：目前點(diǎn)擊領(lǐng)取的數(shù)據(jù)如何妇智？（改版后數(shù)據(jù)需要有所提升）
交互環(huán)節(jié)：
（1）交互稿的共同確認(rèn)：適當(dāng)參與交互原型評(píng)審
（2）可用性測(cè)試：站在用戶的角度滥玷，檢測(cè)功能門檻、易用性
設(shè)計(jì)中：
（1）充分設(shè)計(jì)調(diào)研
（2）設(shè)計(jì)提前驗(yàn)證
設(shè)計(jì)后：
（1）高質(zhì)量的設(shè)計(jì)交付
（2）設(shè)計(jì)追蹤
測(cè)試方法：
4W場(chǎng)景走查：什么人who巍棱、什么時(shí)間when惑畴、什么地點(diǎn)where、什么事情what航徙；
場(chǎng)景分析＝設(shè)計(jì)師的偵探思維＝還原事故現(xiàn)場(chǎng)
設(shè)計(jì)環(huán)節(jié)：
（1）充分設(shè)計(jì)調(diào)研：視覺類競(jìng)品分析（競(jìng)品是誰如贷？我們要清楚的了解競(jìng)品。競(jìng)品為何如此排版）、用戶畫像杠袱、情緒板泻红；
（2）設(shè)計(jì)提前驗(yàn)證：視覺可用性、人物測(cè)試
交互環(huán)節(jié)：
（1）高質(zhì)量設(shè)計(jì)交付：保證設(shè)計(jì)稿命名完整霞掺、細(xì)節(jié)規(guī)范；
（2）設(shè)計(jì)追蹤：還原讹躯、數(shù)據(jù)跟蹤菩彬、體驗(yàn)優(yōu)化池（這個(gè)功能做的不好下一期可以優(yōu)化）
視覺分析－排版：
十字交叉分析：（A）重要緊急、（B）重要不緊急潮梯、（C）不重要緊急骗灶、（D）不重要不緊急
十字交叉發(fā)是可以用來支撐排版理論；對(duì)產(chǎn)品來說重要（產(chǎn)生贏利）秉馏、對(duì)用戶來說緊急放在第一個(gè)模塊耙旦，對(duì)產(chǎn)品重要、對(duì)用戶不緊急可以放在視覺瀏覽順序的中間板塊萝究；?
如何判斷緊急性－－－》問題互動(dòng)：eg）訂單支付完成后（1）用戶最關(guān)注什么免都？原價(jià)＋優(yōu)惠（2）服務(wù)員最關(guān)注什么？支付有沒有成功帆竹？怕漏單（3）產(chǎn)品最關(guān)注什么绕娘？ 領(lǐng)券＋點(diǎn)評(píng)
設(shè)計(jì)驗(yàn)證－界面瀏覽測(cè)試：
1、這個(gè)頁(yè)面中什么地方最吸引你栽连？驗(yàn)證視覺傳達(dá)是否合理且符合預(yù)期
2险领、你認(rèn)為這個(gè)頁(yè)面的作用是什么？界面是以功能傳遞為主秒紧，不是只發(fā)揮視覺審美
3绢陌、當(dāng)你使用這個(gè)頁(yè)面，是否會(huì)使用它提供的功能熔恢？驗(yàn)證產(chǎn)品優(yōu)點(diǎn)是否傳遞清楚脐湾，驗(yàn)證產(chǎn)品是否差異化。設(shè)計(jì)做得再好绩聘，用戶不需要只能引起注意而不會(huì)產(chǎn)生轉(zhuǎn)化率沥割。
5WH ?（通過5wh可以幫助用戶更好的了解產(chǎn)品、幫助設(shè)計(jì)更好的了解用戶）
產(chǎn)品背景what：
（1）要做什么（這個(gè)產(chǎn)品是什么東西）
（2）競(jìng)品狀態(tài)（競(jìng)品是怎么做的凿菩，保留最新頁(yè)面截圖）
（3）行業(yè)資料（同一產(chǎn)品机杜、行業(yè)平均值是多少，“易觀智庫(kù)”）
目標(biāo)人群who
預(yù)期目標(biāo)why
使用場(chǎng)景where
使用節(jié)點(diǎn)when
如何使用how
產(chǎn)品背景（what）：
eg）支付寶
（1）要做什么：金融理財(cái)工具
（2）競(jìng)品狀況：微信支付衅谷、京東（需要了解競(jìng)品名字椒拗、競(jìng)品的關(guān)鍵界面）
（3）行業(yè)資料：同行0.1%服務(wù)手續(xù)費(fèi)（2、3個(gè)行業(yè)資料）
針對(duì)以上三點(diǎn)，改版金融類產(chǎn)品：（1）要考慮給用戶怎么樣的視覺感蚀苛，顏色的情緒定義（2）結(jié)合競(jìng)品狀況如何服務(wù)用戶在验，是否要和主流產(chǎn)品保持一致的設(shè)計(jì)布局，減少用戶使用門檻（3）比同行的劣勢(shì)堵未，是否還有做的必要
目標(biāo)人群（who）：
（1）人群年齡（主要用戶集中在哪個(gè)區(qū)間）
（2）性別分布（男女比例如何）
（3）興趣特征（業(yè)余喜歡干什么）
eg）蘑菇街
人群年齡：白領(lǐng)用戶（25歲）學(xué)生用戶（22歲）
性別分布：女70% 男30%
興趣分布：喜歡看視頻腋舌、雜志和點(diǎn)外賣
對(duì)應(yīng)到設(shè)計(jì)：這部分精準(zhǔn)人群的視覺偏好是什么？女性的色彩偏好是什么渗蟹？運(yùn)營(yíng)宣傳：可以在短視頻块饺、外賣產(chǎn)品中，這類符合地方精準(zhǔn)投放雌芽；目標(biāo)人群在線下喜歡雜志授艰，行為習(xí)慣風(fēng)格延伸到線上，關(guān)鍵詞：雜志風(fēng)／可愛／軟萌? ?世落，色彩馬卡龍色系淮腾；
預(yù)期目標(biāo)（why）：
（1）想要解決什么（如何解決，復(fù)現(xiàn)分析）
（2）有沒有替代方案（行業(yè)中有沒有成熟解決方案屉佳，是否需要借鑒）
eg）共享單車寒冬
- 想要解決什么
- 有沒有替代方案
eg）差異化設(shè)計(jì)：淘寶－數(shù)量導(dǎo)購(gòu) 谷朝；嚴(yán)選：質(zhì)量導(dǎo)購(gòu)；小紅書－內(nèi)容導(dǎo)購(gòu)忘古；
復(fù)現(xiàn)用戶行為：場(chǎng)景分析
4w ——什么人（who）徘禁、什么時(shí)間（when）、什么地點(diǎn)（where）髓堪、什么事情（what）
使用場(chǎng)景（where）：
（1）交互旅程圖（用戶使用產(chǎn)品的主要路徑）：在這個(gè)需求中送朱，用戶從哪里來，又到哪里去（前后頁(yè)）
（2）場(chǎng)景特征：是昏暗的環(huán)境還是明亮環(huán)境干旁，有無干擾
（3）用戶心理：用戶在場(chǎng)景中驶沼，心理狀態(tài)如何，是平穩(wěn)争群、焦慮還是具有非常強(qiáng)的行為目的
eg）美團(tuán)支付頁(yè)面
交互流程圖：打開微信－－掃碼－－支付－－查看賬單
場(chǎng)景特征：室外的明亮環(huán)境（顏色飽和度是否足夠）
用戶心理：用戶比較著急回怜，所欲精簡(jiǎn)了布局
交互旅程圖對(duì)用戶的作用：有助我們做好界面合理性（信息層級(jí)）視覺強(qiáng)弱
場(chǎng)景特征的思考：強(qiáng)光測(cè)試：W3C 強(qiáng)光環(huán)境下的可見度；燭光測(cè)試：尼特值 夜間模式下的舒適度（需要專業(yè)儀器）
https://webaim.org/resources/contrastchecker/ 強(qiáng)光測(cè)試 大于4.5:1
使用節(jié)點(diǎn)（when）：
設(shè)計(jì)排期
KANO模型：
1换薄、魅力因素：提供用戶想不到的需求會(huì)很大的提升用戶滿意度玉雾，不提供則滿意度不變；（3）
2轻要、期望因素：提供期望需求測(cè)滿意度會(huì)上升复旬，不提供則下降；（2）
3冲泥、必備因素：優(yōu)化此需求用戶滿意度不變驹碍，不優(yōu)化則滿意度大幅下降壁涎；（1）
4、無差異因素：用戶根本不在意的功能需求志秃；（4）
5怔球、反向因素：五次需求滿意度不變，有此需求則滿意度下降浮还；（不做）
如何驗(yàn)證（how）：
（1）界面瀏覽測(cè)試
（2）數(shù)據(jù)角度量化設(shè)計(jì)
用戶畫像
核心：給用戶貼標(biāo)簽竟坛，通過對(duì)用戶信息分析而來的高度精煉的特征標(biāo)識(shí)。
用戶畫像3要素：
（1）用戶人口和社會(huì)特征? ?：影響顏色钧舌、設(shè)計(jì)細(xì)節(jié)（呼吸感等）
年齡流码、性別、教育延刘、收入、工作六敬、結(jié)婚情況碘赖、子女（數(shù)量／性別／年齡）、居住城市外构、其他
eg）學(xué)生VS白領(lǐng) ：不同年齡階段 審美不同普泡，不同年齡階段 消費(fèi)不同；所以把產(chǎn)品做成定制化审编，很重要
情緒版
步驟：
（1）確定原聲關(guān)鍵詞? ? ? ? ? ? ? ? ? ? ? ?安全? ? ? ? 抽象近義詞：可靠撼班、穩(wěn)定、保障垒酬、保險(xiǎn)砰嘁、無憂
（2）確定衍生關(guān)鍵詞? ? ? ? ? ? ? ? ? ? ? ?具象名稱：鎖、盾牌勘究、頭盔矮湘、保險(xiǎn)箱、警察
（3）圖片搜集口糕、建立圖片庫(kù)? ? ? ? ? ? ?根據(jù)關(guān)鍵詞各找5個(gè)左右圖片（ 全景缅阳、視覺中國(guó) ）
（4）搜集用戶? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
（5）情緒版分析? ? ? ? ? ? ? ? ? ? ? ? ? ? ?你因?yàn)槭裁丛蜻x擇了這張圖？他的哪些特征吸引了你
挑選照片后：高斯模糊景描，找到適合自己產(chǎn)品的顏色十办；
（2）消費(fèi)行為特征：影響文案細(xì)節(jié)
（1）經(jīng)濟(jì)價(jià)值 —— 頻次、消費(fèi)金額
（2）購(gòu)買行為 —— 消費(fèi)品類廣度超棺、消費(fèi)品類偏好向族、消費(fèi)看重因素、享受優(yōu)惠情況说搅、購(gòu)買時(shí)間偏好炸枣、競(jìng)品使用偏好
（3）平臺(tái)行為 —— UGC行為、頻道關(guān)聯(lián)等 ?（UGC 讓用戶自己產(chǎn)生內(nèi)容）
（3）其他動(dòng)態(tài)屬性：找準(zhǔn)推廣渠道、設(shè)計(jì)賦能商業(yè)
情趣愛好适肠、生活方式霍衫、社交習(xí)慣、出行方式侯养、視覺偏好敦跌、學(xué)習(xí)手段、其他
十字交叉分析：
eg）美團(tuán)支付結(jié)果頁(yè)
X軸：購(gòu)買因素逛揩、總體柠傍、性別（女、男）辩稽、年齡（20以下惧笛、20－30歲、30歲以上）逞泄、職業(yè)（白領(lǐng)患整、學(xué)生）
Y軸：優(yōu)惠、口味喷众、衛(wèi)生各谚、時(shí)間、總價(jià)到千、分量昌渤、營(yíng)養(yǎng)、包裝憔四、其他膀息、樣本量
改版注意點(diǎn)：
（1）當(dāng)競(jìng)品已經(jīng)把用戶體驗(yàn)培養(yǎng)得非常成熟時(shí)，可以借鑒成熟產(chǎn)品的結(jié)構(gòu)了赵；
（2）導(dǎo)航欄遮罩履婉、間距、字號(hào)斟览、圖標(biāo)毁腿、透明度、字體（最小控制在24px）苛茂、顏色（eg已烤、字體五彩斑斕的灰）、漸變斜45度角妓羊、或135度角（一般不會(huì)垂直漸變）
（3）banner分層設(shè)計(jì)思維：背景胯究、圖文混排結(jié)構(gòu)、點(diǎn)綴躁绸、賣點(diǎn)提煉（線上視覺）
（4）圖標(biāo)設(shè)計(jì)復(fù)雜裕循、線條感過多臣嚣，icon 的大小、漸變剥哑、挖空比小于20%同時(shí)有自己的細(xì)節(jié)又表現(xiàn)出特點(diǎn)硅则。
（5）分割過細(xì)，顏色略臟
（6）搭配圖標(biāo)
（7）數(shù)字圖文混排dosis株婴、din
場(chǎng)景走查
4w ——什么人（who）怎虫、什么時(shí)間（when）、什么地點(diǎn)（where）困介、什么事情（what）
設(shè)計(jì)廣度：設(shè)計(jì)方案的精細(xì)度大审、可延續(xù)性
設(shè)計(jì)深度：可用性強(qiáng)、品牌感座哩、商業(yè)分析透徹
Re－Design：以用戶為中心徒扶、以場(chǎng)景為核心、產(chǎn)品的重塑造
阿里巴巴五導(dǎo)家
（業(yè)務(wù)訴求<——>用戶訴求）——> 業(yè)務(wù)目標(biāo)（設(shè)計(jì)目標(biāo)）——>設(shè)計(jì)方案——>衡量指標(biāo)
業(yè)務(wù)訴求－對(duì)PM來說：是提升產(chǎn)品轉(zhuǎn)化率根穷、點(diǎn)擊數(shù)量酷愧、購(gòu)買率、購(gòu)買量
用戶訴求－對(duì)用戶來說：建立認(rèn)知（查看圖片缠诅、確認(rèn)品牌、查看價(jià)格）乍迄、建立信任（銷量和評(píng)價(jià)是否正常管引、詳情頁(yè)內(nèi)容、對(duì)比）闯两、促使下單（優(yōu)惠券等）
場(chǎng)景分析（4W讓我們更清楚用戶會(huì)怎么使用我們的產(chǎn)品）
樹立清楚用戶到底要怎么用產(chǎn)品褥伴，了解預(yù)期目標(biāo) 4W
關(guān)鍵用戶1： 27歲張小姐 ?， 晚上9點(diǎn)漾狼， ?在家里重慢， 買輕奢類服飾
關(guān)鍵用戶2：24歲學(xué)生小李， 下午3點(diǎn)逊躁， ?在寢室似踱， ?買小米眾籌類物品
好的場(chǎng)景走查方案：解決用戶最關(guān)注的功能入口、清晰可見稽煤、首頁(yè)的首屏核芽；
任務(wù)測(cè)試（3-5個(gè)用戶）
請(qǐng)完成XX操作：
完成操作 —— 確認(rèn)布局優(yōu)先級(jí)（因?yàn)閳D標(biāo)、插圖非常直觀酵熙、快速的找到內(nèi)容不要因?yàn)槲淖郑?/p>
操作速度慢?—— 沒有和主流競(jìng)品布局保持一致
不知道XX操作——名詞轧简、模式過于新穎
提高UI的方式
問題定位：
解決方案：
首頁(yè)構(gòu)成：導(dǎo)航欄、banner匾二、UGC頭條哮独、圖標(biāo)區(qū)拳芙、瓷片區(qū)、列表流皮璧、feed流舟扎、Tab欄；
導(dǎo)航欄：
（1）黑色遮罩（融入色彩偏向恶导，不要偏臟浆竭、可以黑色偏藍(lán)色）
（2）通欄／不通欄（主要看搜索欄等內(nèi)容是否重要）
（3）圖標(biāo)粗細(xì)（3px）
（4）搜索框顏色／不透明度（通欄：40%不透明 有色：10-20%）
（5）文字大小顏色（搜索欄26px、不要過淺or過深）
（6）圖標(biāo)細(xì)節(jié)惨寿；
Banner：
（1）背景（微質(zhì)感漸變（同色系漸變）邦泄、雙色系漸變）
（2）構(gòu)圖方案（模特或物品固定位置（斐波那契數(shù)列人臉處于小圓位置））
（3）文字排版（2:1的尺寸）
（4）商品圖定位
（5）點(diǎn)綴（10多種點(diǎn)綴）
（6）賣點(diǎn)提煉（文案提煉）
http://www.zcool.com.cn/article/ZNDk3MDc2.html
UGC：
問題：（1）排版方式：可讀性（2）讓用戶、有興趣? ?
3個(gè)技巧：
（1）文字包使用裂垦、微調(diào)
（2）標(biāo)簽
（3）富有吸引力文案（字不要太兴衬摇）
圖標(biāo)區(qū)：
設(shè)計(jì)觀念：
（1）4色原則（業(yè)務(wù)線鄰近用鄰近色（橙色（黃、紅是橙的鄰近色）系蕉拢、綠色系特碳、藍(lán)色系、紫色系））一行時(shí)建議3色系晕换、2行建議4色系午乓；
（2）少就是多：挖空少、組成少? 細(xì)節(jié)點(diǎn)綴上多一些闸准，比如漸變益愈、微投影
（3）90px
（4）三步走? ? 1、線上產(chǎn)品大小參考夷家； 2蒸其、iconfont辨識(shí)度參考；? 3库快、花瓣 圖形參考
瓷片區(qū)：
（1）合理的文字層級(jí)（大小摸袁、顏色、粗細(xì)）大小一般是大于6px差異化
（2）構(gòu)圖方式合理（左右义屏、對(duì)角線靠汁、上下）
（3）高質(zhì)量配圖（突顯品質(zhì)）eg－花瓣－模特－畫板－找對(duì)應(yīng)關(guān)鍵詞下的排行榜
（4）提煉賣點(diǎn)（標(biāo)簽）
列表流、feed流：
當(dāng)競(jìng)品已經(jīng)把用戶體驗(yàn)培養(yǎng)起來的時(shí)候闽铐，可以借鑒競(jìng)品布局膀曾；
沒有必要重復(fù)別人已經(jīng)研究過的問題；
Tab欄：
（1）3px的合理粗細(xì)
（2）選中面性阳啥、未選中線性
（3）進(jìn)一步的突顯性
（4）3步走極簡(jiǎn)原則
設(shè)計(jì)規(guī)范
設(shè)計(jì)規(guī)范作用：
1添谊、統(tǒng)一性
（1）同一產(chǎn)品 不同頁(yè)面（列表樣式、文字大小察迟、頁(yè)邊距等統(tǒng)一斩狱、規(guī)范提升不同顏色漸變的一致）
（2）不同產(chǎn)品 相同板塊（登陸樣式耳高、我的頁(yè)面；保持一致）
2所踊、細(xì)節(jié)提升設(shè)計(jì)精度（圖標(biāo)的細(xì)節(jié)規(guī)范等）
3泌枪、為開發(fā)組件庫(kù)奠定基礎(chǔ)
完成的設(shè)計(jì)規(guī)范文檔：需要一個(gè)團(tuán)隊(duì)7-14個(gè)工作日；
規(guī)范建立的時(shí)機(jī)很重要秕岛，太早或者太晚都會(huì)給后續(xù)迭代帶來很多麻煩碌燕，最佳時(shí)機(jī)是在完成風(fēng)格定位后做規(guī)范，可以承上啟高效完成工作。
規(guī)范建立步驟
1、場(chǎng)景收集
收集產(chǎn)品所出現(xiàn)的過的場(chǎng)景腐魂，即頁(yè)面結(jié)構(gòu)的構(gòu)成? eg首頁(yè)：
（1）通欄導(dǎo)航欄、搜索框
（2）banner慈鸠、分頁(yè)器（輪播點(diǎn)）
（3）金剛區(qū)（主）（可以通過后臺(tái)配置改變的區(qū)域）
（4）金剛區(qū)（副）
（5）瓷片區(qū)
（6）Tab欄
2、歸納分類
不同樣式灌具、狀態(tài)可以分成不同種類? eg首頁(yè)：
（1）banner（左右排版青团、中央排版）
（2）金剛區(qū)（正常、兜底加載占位圖（網(wǎng)絡(luò)加載滿的時(shí)候出現(xiàn)加載圖））
（3）瓷片區(qū)（左右咖楣、上下督笆、對(duì)角線排版）
（4）Tab欄 （選中、未選中诱贿、角標(biāo)）
3娃肿、定義規(guī)范
幫助設(shè)計(jì)師復(fù)用板塊
UI規(guī)范包括（基礎(chǔ)規(guī)范＋組件規(guī)范＋圖標(biāo)規(guī)范＋特殊頁(yè)面）：
（1）文字（基礎(chǔ)）
（2）顏色（基礎(chǔ)）
（3）按鈕（基礎(chǔ)）
（4）列表（組件（控件）規(guī)范）
（5）導(dǎo)航欄（組件規(guī)范）
（6）Tab欄（組件規(guī)范）
（7）選項(xiàng)卡&翻頁(yè)（組件規(guī)范）
（8）篩選（組件規(guī)范）
（9）輸入框（組件規(guī)范）
（10）布局層級(jí)（基礎(chǔ)）
（11）填單頁(yè)（專屬頁(yè)面規(guī)范）
（12）Z軸層級(jí)（基礎(chǔ)）
（13）toast浮層（特殊狀態(tài)規(guī)范）
（14）空白頁(yè)（特殊狀態(tài)規(guī)范）
（15）加載（特殊狀態(tài)規(guī)范）
（16）運(yùn)營(yíng)圖片展示規(guī)范（組件規(guī)范）
（17）banner規(guī)范（組件規(guī)范）
（18）啟動(dòng)圖（特殊狀態(tài)規(guī)范）
圖標(biāo)規(guī)范
1、圖標(biāo)尺寸
2瘪松、圖標(biāo)頁(yè)邊距
3、業(yè)務(wù)顏色屬性歸類
4锨阿、呼吸感統(tǒng)一（圖標(biāo)設(shè)計(jì)細(xì)節(jié)宵睦，1、圖標(biāo)外環(huán)為90*90px? 2墅诡、內(nèi)部區(qū)域設(shè)計(jì)尺寸為56*56px壳嚎，保持統(tǒng)一的呼吸感）
好的規(guī)范，可以幫助設(shè)計(jì)降低理解門檻末早；
規(guī)范－文字
字體
行間距
字間距（PS間距 12）
字大小
字顏色
字粗細(xì)
使用場(chǎng)景
規(guī)范－顏色
搜集顏色出現(xiàn)過的場(chǎng)景有哪些：banner烟馅、圖標(biāo)區(qū)、瓷片區(qū)然磷、導(dǎo)航欄郑趁、文字等，再歸納分類
以下：
T表示文字姿搜，為Text首字母縮寫寡润；
Btn表示按鈕捆憎，為Button的縮寫；
Bg表示背景色梭纹，為Background的縮寫躲惰；
L表示分割線，為L(zhǎng)ine的首字母变抽；
工具庫(kù)－導(dǎo)航欄細(xì)節(jié)
導(dǎo)航欄圖標(biāo)——圖標(biāo)點(diǎn)擊區(qū)域大写〔Α：48pt＊48pt；圖標(biāo)實(shí)際內(nèi)容大猩茉亍：36pt＊36pt（3px）诡宗；
導(dǎo)航欄圖標(biāo)——圖標(biāo)視覺大小統(tǒng)一——使用圖標(biāo)盒子，圖形圖標(biāo)貼近輔助邊緣逛钻，方形圖標(biāo)略小于輔助框僚焦，不規(guī)則圖形建立黃色輔助線，參考圖標(biāo)盒子曙痘；
導(dǎo)航欄文字——標(biāo)題文字：18pt 芳悲； 左右文字：15pt；（文字對(duì)齊方式：底對(duì)齊）
導(dǎo)航欄文字——圖標(biāo)文字：9pt边坤；（不建議使用文字圖標(biāo)名扛，如用戶年齡跨度大可使用）
導(dǎo)航欄選擇地址——下拉icon：10*6pt，2px或3px茧痒；字體15pt肮韧，字距0，文字距離左側(cè)10旺订、15弄企、20pt，距離icon5pt区拳；
導(dǎo)航欄搜索框——搜索欄設(shè)計(jì)元素：搜索框拘领、搜索圖標(biāo)、搜索文字樱调；搜索背景分為2種情況：a：10%左右白色的不透明底（故意弱化）? ?b：100%的純白（重點(diǎn)功能约素、強(qiáng)化展示）；廢銅爛搜索框輸入：左右都有其他功能圖標(biāo)笆凌，個(gè)別搜索框內(nèi)也有一個(gè)功能圖標(biāo)圣猎；尺寸規(guī)范：（1）搜索欄左右側(cè)間距50pt左右，圖標(biāo)30*30pt乞而。（2）上下間距7-9pt送悔。（3）搜索圖標(biāo)建議左間距8pt。（4）搜索圖標(biāo)建議12-18pt。（5）搜索文字建議14pt
工具庫(kù)－Tab欄
Tab欄圖標(biāo)——圖標(biāo)大蟹潘睢：48*48pt鳍怨，圖標(biāo)實(shí)際大小：38-44pt跪妥；推薦3px像素粗細(xì)鞋喇；（設(shè)計(jì)感簡(jiǎn)約，去除不必要點(diǎn)綴眉撵，可融入淘寶斷點(diǎn)技巧 ）
Tab欄突顯性——（1）選中圖標(biāo)使用主色調(diào)（拉開選中與未選中標(biāo)簽）侦香；（2）選中圖標(biāo)使用面型圖標(biāo)；（3）使用標(biāo)簽凸顯提示效果（特殊突出時(shí)）纽疟；（4）選中圖標(biāo)使用品牌Logo或吉祥物等相關(guān)元素罐韩，增加顯示區(qū)域、隱藏文字污朽、凸顯品牌性散吵；（5）選中圖標(biāo)使用插畫圖片（增加節(jié)日促銷氛圍）；
工具庫(kù)－個(gè)人中心
個(gè)人中心頂部排版——
構(gòu)圖方式：
1蟆肆、左圖右字（圖為用戶頭像）矾睦，國(guó)內(nèi)APP最常規(guī)的做法，幾乎是大家的遵守的隱性規(guī)范炎功；
2枚冗、右圖左字，通常特意強(qiáng)調(diào)用戶頭像時(shí)用該模式蛇损，極少數(shù)app采用赁温，比較挑戰(zhàn)用戶習(xí)慣；
3淤齐、居中構(gòu)圖股囊，這種構(gòu)圖會(huì)極大浪費(fèi)界面的空間利用，不推薦更啄；
個(gè)人中心頭部背景——
背景風(fēng)格：從大方向分兩類稚疹，一類是有背景顏色的處理方式；一類是以頁(yè)面基色為背景的處理方式（黑或白色）锈死。
1贫堰、有背景的顏色的有氛圍：純色穆壕、漸變待牵、搭配激勵(lì)、默認(rèn)圖片喇勋、頭像模糊處理等方法缨该；具體使用根據(jù)產(chǎn)品的調(diào)性來選擇。
2川背、以基色為背景的處理方式在近一年來贰拿，比較流行蛤袒，主要因?yàn)榇蠹以桨l(fā)祝中心本身的傳遞，摒棄多余的干擾因素膨更。
從形狀上來說也可以分為兩類妙真，一類是常規(guī)舉行每一類是有弧度（有流水、波動(dòng)特點(diǎn)金融等）荚守、斜線切割或者結(jié)合誰撥動(dòng)等異性的特殊形狀珍德。
基色背景：基色背景與頁(yè)面主色調(diào)相同，頁(yè)面使用白色時(shí)基色即顯示白色（黑色同理）矗漾。使用基色為背景的應(yīng)用會(huì)顯得信息層級(jí)少并清爽锈候，是傳遞頭部信息效率最高的處理方式。
純色背景：簡(jiǎn)單的純色填充敞贡，通常色調(diào)與app主色相契合泵琳，能突出品牌感；常見于工具類的應(yīng)用或者面向用戶是B端的應(yīng)用誊役，簡(jiǎn)潔明了（注意這類應(yīng)用一般是不需要腿用戶個(gè)人化的標(biāo)簽）获列。
漸變背景：目前國(guó)內(nèi)app常用形式之一，常見同色相下漸變和鄰近色漸變势木。相比于純色增加了細(xì)節(jié)蛛倦，而且背景干凈，幾乎對(duì)信息傳遞也不產(chǎn)生干擾啦桌，同適用于工具類應(yīng)用溯壶。
肌理背景：常搭配漸變背景一起出現(xiàn)，在電商或運(yùn)營(yíng)屬性較強(qiáng)的應(yīng)用中常出現(xiàn)甫男。肌理一般都由基礎(chǔ)形狀圓且改、矩形、三角形板驳、五角星等作為點(diǎn)線面構(gòu)成又跛，也有部分會(huì)使用融球等效果。以面形式出現(xiàn)時(shí)若治，常食用鄰近色相漸變＋不透明度過度的方式慨蓝，在豐富頁(yè)面細(xì)節(jié)的同時(shí)弱化效果，保證主要信息的可讀性端幼。
圖片背景：圖片背景一般被應(yīng)用在音樂圖片類社交軟件中礼烈，這類軟件的用戶比較喜歡個(gè)性化、風(fēng)格化比較強(qiáng)的東西婆跑。無論是選擇背景圖片還是以用戶頭像本身做背景都是希望滿足用戶心里的追求獨(dú)特的需求此熬。在國(guó)內(nèi)APP中比較少用刀，因?yàn)閷?duì)圖像質(zhì)量和占用屏幕空間上的要求比阿基哦高，在使用時(shí)往往會(huì)搭配模糊或者加入一層黑色不透明度來保證主信息的識(shí)別犀忱。
工具庫(kù)－UI中如何融入品牌Logo
首頁(yè)可放位置：
1募谎、導(dǎo)航欄左側(cè)展示品牌logo（不要生硬放在導(dǎo)航欄中央，可與搜索欄等高）阴汇；
2数冬、UGC入口的title設(shè)計(jì)，使用整個(gè)logo或logo文字部分搀庶；
3吉执、底部導(dǎo)航欄首頁(yè)圖標(biāo)
工具庫(kù)－分割線和微投影效果
微投影效果技巧：一個(gè)框，復(fù)制一個(gè)縮小80%-90%地来，選擇較深的顏色戳玫，高斯模糊20-30；
不要選擇在相同顏色的區(qū)塊使用微投影未斑，會(huì)造成色彩碰撞咕宿，解決辦法是換色彩，或者去除間隔蜡秽；
小技巧：小標(biāo)題府阀，icon和文字對(duì)齊；
圖標(biāo)設(shè)計(jì)
按照信息層級(jí)：（1）如果板塊重要芽突，采用面性试浙；（2）如果板塊一般，則采用線性寞蚌；
問：為什么使用圖標(biāo)：
因?yàn)樵谕瓿梢粋€(gè)功能操作時(shí)田巴，可能出現(xiàn)三種情況1、挟秤。壹哺。。2艘刚、管宵。。攀甚。3箩朴、。秋度。炸庞。，為了讓用戶更快更容易完成操作静陈，所以使用圖標(biāo)燕雁，圖標(biāo)比文字理解成本更低；
問：為什么圖標(biāo)會(huì)如此多樣化鲸拥？
答：信息層級(jí)：根據(jù)用戶關(guān)注重點(diǎn)拐格、功能優(yōu)先級(jí)合理分配視覺；
1刑赶、面性圖標(biāo)
一般面性重要性大于線性捏浊，按照信息層級(jí)的板塊比例，比如80%以上的信息入口可以使用面性撞叨，比如金剛區(qū)的板塊30%或者說支付寶首頁(yè)入口用平均分布不需要突顯金踪，因此使用線性圖標(biāo)；
1牵敷、使用場(chǎng)景：
功能入口胡岔、標(biāo)題點(diǎn)綴、列表流內(nèi)容枷餐、選中狀態(tài)
2靶瘸、面性技法解析：
功能區(qū)面性圖標(biāo)細(xì)節(jié)解析：
（1）內(nèi)呼吸感統(tǒng)一（0.618）；
（2）視覺飽和度統(tǒng)一毛肋、漸變統(tǒng)一怨咪、四色原則；
（2）顏色符合業(yè)務(wù)色润匙；
（4）學(xué)會(huì)做減法诗眨，簡(jiǎn)約挖空；
? ? ? ? ? 圖標(biāo)簡(jiǎn)約 a孕讳、組成簡(jiǎn)單 ?b匠楚、挖空簡(jiǎn)單（盡量一個(gè)挖空點(diǎn)，小于14%） c厂财、點(diǎn)綴弱化,微漸變油啤、微投影；
標(biāo)題點(diǎn)綴圖標(biāo)細(xì)節(jié)解析：
標(biāo)題點(diǎn)綴的意義：在快速閱讀過程中蟀苛，快速找到心儀板塊和板塊區(qū)分益咬。
（1）5分原則：圖標(biāo)與文字的間距是正常間距的一半
（2）圖標(biāo)與文字保持統(tǒng)一高度
（3）形狀必須極簡(jiǎn)
（4）不要有點(diǎn)綴形狀
列表流圖標(biāo)細(xì)節(jié)解析：
（1）上下間距對(duì)齊，左右間距對(duì)齊帜平，不等同于標(biāo)題圖標(biāo)
（2）業(yè)務(wù)屬性相同的圖標(biāo)幽告，使用統(tǒng)一顏色
（3）極簡(jiǎn)原則（構(gòu)成簡(jiǎn)單＋色彩簡(jiǎn)單）
統(tǒng)一背景icon辨識(shí)度低，異型icon辨識(shí)讀會(huì)高裆甩；
底部Tab圖標(biāo)細(xì)節(jié)解析：
（1）選中態(tài)顏色使用品牌色
（2）統(tǒng)一設(shè)計(jì)范圍與視覺比重（圖標(biāo)盒子）
（3）統(tǒng)一挖空
（4）統(tǒng)一圓角數(shù)值
（5）良好呼吸感冗锁，間距合理（頁(yè)面等分后垂直居中）
（6）極簡(jiǎn)挖空，小點(diǎn)綴
小細(xì)節(jié)總結(jié)：
（1）白色面性微漸變：a嗤栓、微微漸變 ?b冻河、映襯至環(huán)境色
（2）色塊的不透明：a箍邮、同緯度色系的不透明 b、少量使用30%色塊的不透明
（3）折紙陰影：a叨叙、白色至神話景色的邊間 ?b锭弊、極少使用10%色塊使用比
2、線性圖標(biāo)
子頁(yè)面中圖標(biāo)弱于首頁(yè)擂错；流量入口也要弱于首頁(yè)味滞；
1、使用場(chǎng)景：
功能入口钮呀、平臺(tái)工具類剑鞍、非主流量入口
2、面性技法解析：
功能區(qū) 線性圖標(biāo)細(xì)節(jié)解析：
（1）視覺比例統(tǒng)一
（2）顏色符合業(yè)務(wù)色（科技感——藍(lán)色爽醋、醫(yī)療感——綠色）
（3）線條簡(jiǎn)練蚁署，不要過于復(fù)雜
（4）圓角數(shù)量不宜過大，3-4px
個(gè)人中心頁(yè)面出彩：只有頂部個(gè)人中心蚂四、列表流形用。。证杭。太過簡(jiǎn)單田度，可以結(jié)合分析拓展出功能，頁(yè)面層次性解愤，重點(diǎn)劃分把視覺重心放在重點(diǎn)板塊镇饺，可以進(jìn)行界面瀏覽測(cè)試；個(gè)人界面的可以采用網(wǎng)格化圖標(biāo)送讲。
輔助功能按鈕 線性圖標(biāo)細(xì)節(jié)解析：
feed流奸笤、tab未選中按鈕：選擇線性的原因是不給用戶歧義，以為是已經(jīng)點(diǎn)過的按鈕哼鬓；
（1）視覺比例統(tǒng)一
（2）線條簡(jiǎn)練监右，不要過于復(fù)雜
（3）圖標(biāo)比例不要過大，圖標(biāo)大于文字
列表流 線性圖標(biāo)細(xì)節(jié)解析：
（1）上下間距＝頁(yè)邊距
（2）線性圖標(biāo)异希，秒變粗細(xì)統(tǒng)一
（3）圓角數(shù)值統(tǒng)一
（4）簡(jiǎn)約不復(fù)雜
選中狀態(tài) 線性圖標(biāo)細(xì)節(jié)解析：
（1）顏色使用品牌色
（2）統(tǒng)一的設(shè)計(jì)范圍與視覺比重
（3）圖標(biāo)復(fù)雜程度統(tǒng)一
小細(xì)節(jié)總結(jié)：
（1）粗線性：一般3px健盒，適合年輕化的用戶人群的產(chǎn)品5px；選中功能定制化称簿，下拉3扣癣、4屏后，底部tab欄第一個(gè)出現(xiàn)小火箭意思是回到首頁(yè)憨降；
（2）斷點(diǎn)：形狀拼接處斷點(diǎn)父虑，反復(fù)嘗試
（3）纏繞感：斷點(diǎn)處與內(nèi)部形狀做連接
3、線面結(jié)合圖標(biāo)
細(xì)節(jié)比較多授药，一般在低齡化的用戶中可以使用士嚎；
功能入口呜魄、列表流內(nèi)容、選中狀態(tài)莱衩；代表：閑魚爵嗅；
選中狀態(tài) 線面結(jié)合圖標(biāo)細(xì)節(jié)解析：
（1）顏色使用品牌色
（2）注意描邊粗細(xì)統(tǒng)一
（3）圖標(biāo)復(fù)雜程度統(tǒng)一
（4）呼吸感白色留白統(tǒng)一（可填滿or不填滿）
其他小細(xì)節(jié)：
（1）淺.主題色點(diǎn)綴 ? ：基于線性的進(jìn)階版，個(gè)性感強(qiáng)膳殷，形態(tài)飽滿（建議可以在個(gè)人中心中使用）；
（2）MBE描邊風(fēng)格：配色大膽九火，風(fēng)格明顯赚窃；了解即可，app中不使用作為icon岔激，太低齡化勒极；
4、異性圖標(biāo)
類似面性圖標(biāo)虑鼎；
總結(jié)
1辱匿、圖標(biāo)使用基本圖形設(shè)計(jì)：
盡量不要自創(chuàng)形狀，盡量使用最基本的幾何圖形進(jìn)行組合炫彩；
2匾七、使用圖標(biāo)盒子做設(shè)計(jì)
3、品牌凸顯性
圖標(biāo)不止要遵循設(shè)計(jì)規(guī)范江兢，更要統(tǒng)一風(fēng)格迎合用戶昨忆；一些統(tǒng)一元素點(diǎn)綴，類似閑魚的品牌感杉允；
設(shè)計(jì)價(jià)值：
通過視覺表現(xiàn)的方式 主力業(yè)務(wù)拿結(jié)果（美觀（細(xì)節(jié)規(guī)范）邑贴、數(shù)據(jù)（GSM）、體驗(yàn)（易用性提升））叔磷，流量分發(fā)率直線提升拢驾；
UI精細(xì)度：
UI精細(xì)度直線提升
進(jìn)步總結(jié)：
1、在視覺細(xì)節(jié)上充分借鑒競(jìng)品和素材庫(kù)改基，對(duì)很多的優(yōu)秀競(jìng)品的具體模塊截圖繁疤，然后再設(shè)計(jì)是常事各種處理方式，對(duì)照競(jìng)品的處理方式秕狰，選出最優(yōu)和最適合的設(shè)計(jì)稿嵌洼；
2、真正吧產(chǎn)品需求分析透徹封恰，篩選出主要用和主要功能麻养，列出后逐一對(duì)比競(jìng)品，然后再分析模塊做到差異化提升诺舔；
3鳖昌、完稿后對(duì)照設(shè)計(jì)走查的表單备畦，再做一遍檢查；
4许昨、做5wh和分析需求的時(shí)候懂盐，通過產(chǎn)品還有很多市場(chǎng)的同時(shí)很深入的了解了產(chǎn)品的功能，設(shè)計(jì)不能埋頭做設(shè)計(jì)糕档，也要進(jìn)行深入的研究和探索莉恼；
規(guī)范四個(gè)方向：
1、基礎(chǔ)：文字速那、顏色俐银、按鈕
2刃榨、組件：導(dǎo)航欄苛让、彈窗朝聋、輸入框
3秋茫、圖標(biāo)：金剛區(qū)瑟俭、標(biāo)題圖標(biāo)曲掰、列表流圖標(biāo)
4埋心、特殊頁(yè)面
首頁(yè)UI板塊：
基礎(chǔ)：文字（粗細(xì)區(qū)分／顏色／大邢勐濉／字間距／段間距）鹤竭、顏色（背景色值／強(qiáng)光測(cè)試）踊餐、標(biāo)簽（標(biāo)題）
組件：導(dǎo)航欄（搜索框等）、懸浮模塊（高度臀稚、定義頁(yè)邊距市袖、內(nèi)間距）、其他模塊（尺寸烁涌、卡片間距苍碟、內(nèi)間距）
圖標(biāo)：金剛區(qū)、浮層區(qū)板塊圖標(biāo)撮执、標(biāo)題圖標(biāo)微峰、文字字標(biāo)
首頁(yè)詳解
1、頁(yè)面的不同作用
基礎(chǔ)：基礎(chǔ)布局抒钱、文字蜓肆、顏色、標(biāo)簽
組件：導(dǎo)航欄谋币、輸入框仗扬、UGC頭條、列表板塊蕾额、布局層級(jí)
圖標(biāo)：首頁(yè)圖標(biāo)區(qū)
運(yùn)營(yíng)類：banner早芭、瓷片區(qū)
建立步驟：1、場(chǎng)景收集（手機(jī)產(chǎn)品所有出現(xiàn)過的場(chǎng)景）诅蝶；2退个、歸納分類（不同樣式募壕、狀態(tài)可以分為不同種類）；3语盈、定義規(guī)范（幫助設(shè)計(jì)師復(fù)用板塊）
頁(yè)面層級(jí)梳理：背景舱馅、內(nèi)容層、浮層
2刀荒、首頁(yè)細(xì)節(jié)拆分和功能目的?
分割線與背景色：
非通欄分割線（e8e8e8）比背景色要深(f2f2f2)代嗤；背景更有質(zhì)感可以稍微融入一點(diǎn)藍(lán)色，顏色會(huì)更高級(jí)缠借；分割感非線性時(shí)干毅，弱化分裂感：（1）首頁(yè)減少灰色板塊分割（2個(gè)），（2）如有需要使用大留白烈炭；
字體層次：
字體層次的三種體現(xiàn)：粗細(xì)溶锭、大小宝恶、顏色符隙；
中文：平方、（方正蘭亭黑可以自己創(chuàng)作時(shí)使用）? ?數(shù)字：lato垫毙、din霹疫、dosis
文字呼吸感：（為純文字板塊提供細(xì)節(jié)）
1、36px的標(biāo)題? ? ? ?行間距：50px? ? 字間距：12px
2综芥、28px的正文? ? ? ?行間距：40px? ?字間距：10px
3丽蝎、22px的副文? ? ? ?行間距：30px? ?字間距：10px
文字顏色：
特殊文字：微質(zhì)感：淺漸變＋微彌散效果；
顏色：
也是三步走：場(chǎng)景收集膀藐、歸納分類屠阻、定義規(guī)范
文字、按鈕额各、背景色国觉、分割線
通用按鈕做成品牌色，特殊按鈕考慮用戶使用情緒虾啦，結(jié)合色環(huán)對(duì)應(yīng)的色彩情緒麻诀；
強(qiáng)光測(cè)試／色彩情緒／情緒版／色彩偏向
主題色確認(rèn)的正確方式：
1、確定原生關(guān)鍵詞：eg）安全（保險(xiǎn)傲醉、保障蝇闭、信任）
2、確定衍生關(guān)鍵詞：eg）頭盔硬毕、警察呻引、盾牌（1個(gè)原生做出三個(gè)衍生）
3、圖片搜集吐咳、建立圖片庫(kù)
4苞七、搜索用戶
5藐守、情緒版分析
標(biāo)簽
用處：1、突顯板塊 蹂风；? 2卢厂、提煉賣點(diǎn)
標(biāo)簽設(shè)計(jì)細(xì)節(jié)：
1、文字22
2惠啄、標(biāo)簽高度：30px
3慎恒、呼吸感：6px（兩側(cè)邊距）
4、字體包：接近UI正文字體撵渡，但要粗于平方（方正蘭亭準(zhǔn)黑）
導(dǎo)航欄
文字大腥诩怼：（文字底部對(duì)齊）
標(biāo)題大小：36px
左右文字：30px
圖標(biāo)文字：18px（給跨度年紀(jì)大的的app使用趋距，一般不使用）
導(dǎo)航欄圖標(biāo)大辛Ｑ酢：
圖標(biāo)點(diǎn)擊區(qū)48px＊48px（88*88），實(shí)際大小36-48px节腐；
圖標(biāo)盒子
選擇地址：
文字：導(dǎo)航欄選擇文字建議字號(hào)30px外盯，字間距0（可根據(jù)圖標(biāo)樣式選擇常規(guī)或中等）
下拉箭頭：20*12px，粗細(xì)為2px或3px翼雀；
選擇地址間距：文字左間距：20px饱苟、24px、30px狼渊；文字雨下拉箭頭10px箱熬；
搜索欄設(shè)：
搜索框、搜索圖標(biāo)狈邑、搜索文字城须、搜索背景：a、10%左右的不透明底（故意弱化）? b米苹、100%的純白（重點(diǎn)功能糕伐、強(qiáng)化展示）；
左右都有icon驱入，個(gè)別右側(cè)也有一個(gè)icon
尺寸規(guī)范：搜索欄左右間距建議100px左右赤炒，上下間距14-18的偶數(shù)值，圖標(biāo)左右間距15亏较，搜索圖標(biāo)建議24-36px的偶數(shù)莺褒，搜索文字建議18px；
首頁(yè)圖標(biāo)區(qū)：
1雪情、內(nèi)呼吸感統(tǒng)一（0.618）
2遵岩、視覺飽和度統(tǒng)一、漸變統(tǒng)一、四色原則（1排3色系）
3尘执、顏色符合業(yè)務(wù)色
4舍哄、學(xué)會(huì)做減法（1）組成簡(jiǎn)單、（2）挖空簡(jiǎn)單（3）點(diǎn)綴弱化
重點(diǎn)板塊圖標(biāo)設(shè)計(jì)三步走：（1）線上產(chǎn)品（設(shè)計(jì)尺寸）（2）iconfont（辨識(shí)度）（3）花瓣（美觀度誊锭。趣味性）
banner拆分
背景表悬、構(gòu)圖方式，文字排版丧靡、點(diǎn)綴蟆沫、標(biāo)簽（使用用戶畫像中的＊＊行為特征）
瓷片區(qū)拆分
構(gòu)圖方式、配色質(zhì)量温治、文案大小饭庞、標(biāo)簽（使用用戶畫像中的＊＊行為特征）
UGC頭條
頭條logo、標(biāo)簽熬荆、文字正文
1舟山、字體設(shè)計(jì)
剛勁字體、為傾斜卤恳、微漸變
2累盗、標(biāo)簽
提煉賣點(diǎn)，增加閱讀體驗(yàn)纬黎、節(jié)奏
3幅骄、文案
精簡(jiǎn)劫窒，且與用戶相關(guān)
標(biāo)題：
標(biāo)題點(diǎn)綴：在快速閱讀過程中本今，快速找到心儀板塊和板塊區(qū)分；
首頁(yè)的功能是流量分發(fā)：
兩個(gè)緯度：
1主巍、了解用戶：
（1）用戶畫像 3大模板
（2）5wh 四大環(huán)節(jié)
2冠息、布局極限平衡
（1）排版方式多樣
（2）細(xì)節(jié)一致
做一個(gè)有影響力，對(duì)行業(yè)有貢獻(xiàn)的設(shè)計(jì)師孕索；
圖片流逛艰、卡片流、Feed流
修改當(dāng)前app切入角度：
基礎(chǔ)：基礎(chǔ)布局搞旭、文字：文字大小出現(xiàn)過多散怖、顏色
組件：導(dǎo)航欄、輸入框肄渗、列表板塊（表頭镇眷、表內(nèi)容、表尾）翎嫡、UGC頭條
圖標(biāo)：金剛區(qū)圖標(biāo)欠动、列表表頭圖標(biāo)
動(dòng)效
動(dòng)效的速率曲線
慣性定律、加速度、反作用力具伍、胡克定律
流是呈現(xiàn)的形式翅雏，流本身自然的形成事件的時(shí)間線；
圖片流：
代表app：pinterest人芽、花瓣
Z軸角度切入：背景層望几、內(nèi)容層、系統(tǒng)控件層（基礎(chǔ)萤厅、組件橄妆、圖標(biāo)）
設(shè)計(jì)前：
1、業(yè)務(wù)目標(biāo)：（1）了解目標(biāo)用戶祈坠，（2）了解用戶痛點(diǎn)? （3）了解產(chǎn)品目標(biāo)要解決的問題（達(dá)到什么指標(biāo)害碾，UV，PV流失率赦拘，轉(zhuǎn)化率慌随，滿意度）（4）了解設(shè)計(jì)目標(biāo)及解決方法
2、時(shí)間和人員：（1）確定PM躺同、開發(fā)人員 （2）初稿時(shí)間阁猜、定稿時(shí)間、檢查時(shí)間
3蹋艺、交互邏輯：（1）理解頁(yè)面中文語(yǔ)義和空間功能? （2）理解人物流（入口剃袍、出口）
4、分析：（1）分析競(jìng)品的框架捎谨、功能特點(diǎn)民效、體驗(yàn)有缺點(diǎn)? （2）分析現(xiàn)在產(chǎn)品的數(shù)據(jù)情況，明顯不足涛救；
5畏邢、改版項(xiàng)目／全新項(xiàng)目：（1）符合流行趨勢(shì)? （2）符合公司品牌風(fēng)格 （3）符合用戶群體定位
6、迭代項(xiàng)目：（1）熟悉設(shè)計(jì)規(guī)范? （2）知道規(guī)范文檔位置检吆、維護(hù)人
設(shè)計(jì)后：UI走查表
信息層級(jí)：（1）字號(hào)大小是否表達(dá)優(yōu)先級(jí)舒萎；（2）元素間距符合各層級(jí)的對(duì)比關(guān)系
信息表意：（1）無多余的干擾元素；（2）土星文字表達(dá)符合大眾認(rèn)知蹭沛，有無誤導(dǎo)和歧義
文字：（1）符合規(guī)范大斜矍蕖；（2）符合規(guī)范字體摊灭；（3）顏色符合規(guī)范灰度值
圖標(biāo)：（1）通用icon復(fù)用通用素材咆贬；（2）新icon符合規(guī)范風(fēng)格；（3）新icon考慮拓展性
圖片：（1）使用現(xiàn)有比例和尺寸斟或；（2）圖片狀態(tài)符合規(guī)范素征；（3）確保文本易于閱讀
其他：（1）間距、控件符合規(guī)范；（2）切圖文檔中圖片命名符合規(guī)范御毅；（3）檢查頁(yè)面一致性
設(shè)計(jì)稿：（1）初稿根欧、中稿完成時(shí)與產(chǎn)品和交互確認(rèn)方向（2）文字、圖片不涉及版權(quán)問題
實(shí)現(xiàn)：與技術(shù)同步可實(shí)現(xiàn)性
圖片流－構(gòu)成板塊：
基礎(chǔ)（參考之前提到的細(xì)節(jié)）：基本布局（色彩分割線和灰色分割端蛆、色彩偏向）凤粗、文字（字體包、顏色今豆、層級(jí)（大小嫌拣、顏色、間距））呆躲、顏色
組件：圖片規(guī)范异逐、用戶頭像、卡片模塊
圖標(biāo)：無
圖片卡片設(shè)計(jì)注意點(diǎn)：卡片哪圖片內(nèi)容區(qū)域高度不固定插掂，主要信息分布區(qū)域固定
頭像細(xì)節(jié)：（1）左右重心平衡（2）素材細(xì)節(jié)：a灰瞻、正面視角? ?b、背景簡(jiǎn)單? ? c辅甥、顏色明亮
卡片模塊：
1酝润、內(nèi)間距 統(tǒng)一數(shù)值反復(fù)應(yīng)用 eg）2個(gè) 板塊區(qū)分24px（5分原則） ；內(nèi)容區(qū)分 20px
2璃弄、主副標(biāo)題區(qū)分明顯（顏色要销、大小、粗細(xì)）
3夏块、合理的圓角數(shù)值（6-10px）
頁(yè)面作用：（頁(yè)面作用決定了它的視覺疏咐，所以不使用icon等內(nèi)容）
1、快速對(duì)圖片內(nèi)容進(jìn)行瀏覽拨扶、篩選
2凳鬓、圖片流（瀑布流）滿足了用戶對(duì)圖片快速瀏覽篩選的需求
卡片流
相似圖片流文字的部分茁肠；結(jié)構(gòu)：基礎(chǔ)布局患民、文字（小差別大于4px）、卡片流組件垦梆、圖標(biāo)
文字卡片設(shè)計(jì)注意點(diǎn)：
卡片內(nèi)容區(qū)域 高度固定匹颤；
主要信息區(qū)域布局固定；
間距數(shù)值反復(fù)使用托猩；
卡片流中的圖標(biāo)需要做弱化處理印蓖；
頁(yè)面作用：
卡片式用戶了解更多細(xì)節(jié)信息的入口，把信息以固定的排版布局模式展示出來——買點(diǎn)提煉京腥、文案調(diào)整（用戶畫像赦肃、5wh）
Feed流
發(fā)現(xiàn)UI細(xì)節(jié)，理解功能目的
連接技巧 形成整體 全面突破；
feed流代表作：新浪微博他宛，好奇心日?qǐng)?bào)船侧，UC頭條，網(wǎng)易新聞厅各，豆瓣镜撩，脈脈
作用：
feed流是希望用戶無限往下拉；在feed流里面穿插廣告队塘，下拉越多袁梗，接收到更多廣告；
圖片配圖三個(gè)方向：
1憔古、背景干凈遮怜、
2、烘托主體（不一定要最大鸿市，要有呼吸感）
3奈泪、色彩聯(lián)系（和標(biāo)簽、圖標(biāo)灸芳、圖題色 有顏色聯(lián)系）
4涝桅、突顯品質(zhì)感
怎么找圖片，為什么放多種圖片：通過數(shù)據(jù)來做出圖片選擇烙样，多方面考慮比如高購(gòu)買率放在外面增加熟悉感和點(diǎn)擊率冯遂，高單價(jià)圖帶動(dòng)低單價(jià)圖等等；
最佳圖片尺寸比例是什么谒获？三連圖間距蛤肌？
圖片尺寸參考：
長(zhǎng)：寬
1、9:8（商家列表流184:164）
2批狱、9:6（feed流 ）
3裸准、1:1（頭像 ）
4、16:9（全屏大圖赔硫，banner等）
間距問題：
1炒俱、建立基礎(chǔ)，比如10px
2爪膊、每提升一個(gè)層級(jí)权悟，增加6px
篩選器：
如何做好細(xì)節(jié)
1、選中推盛、未選中字號(hào)峦阁、粗細(xì)、顏色不一樣耘成；
2榔昔、底下劃線驹闰，可以采用微漸變
輔助按鈕：
左右視覺平衡，天平原理撒会；輔助按鈕和其他小文字對(duì)齊疮方，做得比較弱化，不影響閱讀節(jié)奏茧彤；
閱讀節(jié)奏的控制
通過視覺層級(jí)控制閱讀節(jié)奏骡显，給用戶帶來沉浸式體驗(yàn)
一維分析法
1、三維轉(zhuǎn)一維
2曾掂、衡量視覺元素比重
3惫谤、以簡(jiǎn)單圖形輔助理解（比如按重要程度分：淺灰線：背景；文字＋icon：灰灰珠洗；頭像＋圖片：黑色）
每個(gè)板塊溜歪，保持各個(gè)頁(yè)面瀏覽模式和3的色彩線一樣，無限循環(huán)能提高閱讀性许蓖；
詳情頁(yè)細(xì)節(jié)解析
視覺細(xì)節(jié)構(gòu)成＋功能特點(diǎn)
產(chǎn)品詳情頁(yè)（O2O設(shè)計(jì)蝴猪、電商類設(shè)計(jì)）
構(gòu)成：還是按3大類劃分，有以下幾點(diǎn)：基礎(chǔ)布局（縱深Z軸看基礎(chǔ)布局）膊爪、圖片規(guī)范自阱、文字、標(biāo)簽米酬、按鈕沛豌、列表、優(yōu)惠抵用券赃额、評(píng)價(jià)板塊加派、吸底通欄按鈕、圖標(biāo)
小經(jīng)驗(yàn)：
1跳芳、減少不必要的斷層芍锦，內(nèi)容與內(nèi)容，使用大留白與線飞盆；
2娄琉、功能與功能，使用分隔板塊（但不絕對(duì)）20px
3桨啃、組成板塊眾多车胡，盡量只使用2個(gè)及以下灰色分隔
詳情頁(yè)從上到下：（ 建立認(rèn)知——》增加信任——》促銷導(dǎo)購(gòu) ）
（1）圖片展示（建立認(rèn)知板塊）
（2）基本信息（建立認(rèn)知板塊）
（3）用戶評(píng)價(jià)、用戶權(quán)益（無理由退換貨等）（增加信任）
（4）UGC板塊（增加信任）
（5）優(yōu)惠券／抵扣券（促銷導(dǎo)購(gòu)）
（6）相似推薦板塊（促銷導(dǎo)購(gòu)）
詳情頁(yè)中的圖片尺寸：
1照瘾、先嘗試主流競(jìng)品尺寸；
2丧慈、再嘗試9:8
3析命、最后嘗試9:6
4主卫、最后思考如何在首頁(yè)中展示更多的賣點(diǎn)；
詳情頁(yè)中的文字：
1鹃愤、確認(rèn)文字層級(jí)? 主／副／標(biāo)簽 點(diǎn)綴? ?減少文字字號(hào)出現(xiàn)多種簇搅，控制在3個(gè)左右；
2软吐、板塊層級(jí)? ?有強(qiáng)有弱（強(qiáng)化數(shù)據(jù)可視化等內(nèi)容）
3瘩将、重點(diǎn)功能梳理? ?有沒有必須要展示的，放在第一屏凹耙，其他往后放姿现；
詳情頁(yè)中的標(biāo)簽：
1、標(biāo)簽高度：30px或與主文案高度一致肖抱；
2备典、標(biāo)簽文字（大小22px、字體包：方正蘭亭準(zhǔn)黑（需要版權(quán)））
3意述、標(biāo)簽內(nèi)留白 6px提佣；
4、標(biāo)簽作用：（1）提煉賣點(diǎn)荤崇、（2）突顯內(nèi)容
詳情頁(yè)中的按鈕：
頂部懸浮按鈕拌屏、底部吸底按鈕；
導(dǎo)航欄懸浮圖標(biāo)梳理：為了節(jié)約空間术荤，詳情頁(yè)一般通欄槐壳，按鈕間隔20px，高度68px喜每；
圖標(biāo)大小推理：（懂得規(guī)律即可务唐，花時(shí)間在真正影響視覺的點(diǎn)（圖標(biāo)三步走））
1、內(nèi)部正方形：36px带兜；?
2枫笛、外部正方形：36/0.618＝58淮阐；?
3娇妓、選取一個(gè)視覺占比上，與58近似的圓（類似圖標(biāo)盒子 ）所以最后是68p x
圖標(biāo)的角標(biāo)：
1逆皮、尺寸36px无畔；
2啊楚、數(shù)字24px 文字22px 并加粗顯示；
表頭圖標(biāo)細(xì)節(jié)：
1浑彰、如何控制間距：5分原則恭理；
2、標(biāo)題字體大泄洹：30px颜价；?
3涯保、圖標(biāo)尺寸：保持文本高度一致；
表內(nèi)容細(xì)節(jié)：
1周伦、如何控制字間距：同一數(shù)值反復(fù)使用夕春；?
2、字體層級(jí)突顯： 顏色专挪、粗細(xì)及志、大小 4-6px差異對(duì)比；
3寨腔、圖片尺寸：9:8 字段比較多的時(shí)候速侈，為了文字和圖片平衡；
表尾細(xì)節(jié)：1脆侮、高度：90px锌畸；
優(yōu)惠抵用券：
1、關(guān)鍵字段梳理? 顏色靖避、布局
2潭枣、實(shí)物扁平化 正副券
評(píng)價(jià)板塊
列表流的表內(nèi)容和評(píng)價(jià)板塊類似
1、配圖質(zhì)量控制：鄰近色幻捏、北京干凈
2盆犁、五角星：不要過于圓胖。39%品質(zhì)感篡九，48%正常谐岁；
吸底按鈕
向主流電商靠齊；
eg）淘寶：加入按鈕和立即購(gòu)買加起來大于50%的寬度榛臼；
結(jié)合業(yè)務(wù)伊佃，突顯的內(nèi)容不同：比如淘寶是：橙、紅沛善；團(tuán)購(gòu)是：橙航揉、綠；天貓是紫紅金刁、紫色帅涂；
相思推薦如何增加轉(zhuǎn)化
十字交叉分析：2個(gè)緯度，用戶的重要程度和公司緊急程度
比如賣外分成4個(gè)緯度：1尤蛮、價(jià)格近媳友、距離近? ?2、價(jià)格近产捞、距離遠(yuǎn)? ? 3醇锚、價(jià)格高距離近? ? 4、價(jià)格高轧葛、距離遠(yuǎn)搂抒；? 結(jié)合用戶體驗(yàn)和商家競(jìng)爭(zhēng)艇搀，實(shí)現(xiàn)良性變現(xiàn)尿扯，為新公司盈利增加曝廣度求晶；
個(gè)人中心
1、鍛煉設(shè)計(jì)衷笋，不要重復(fù)自己的故有技法
2芳杏、突顯板塊“這個(gè)頁(yè)面，重點(diǎn)功能是什么辟宗？”
3爵赵、適當(dāng)修改布局，增加產(chǎn)品粘性
4泊脐、增加真實(shí)性空幻、副文案，消息提示
增加個(gè)人中心合理性：
1容客、應(yīng)用界面瀏覽測(cè)試秕铛；
2、應(yīng)用情緒版方法論缩挑；
3但两、使用動(dòng)效軟件完成 彩蛋效果；
UI中的運(yùn)營(yíng)設(shè)計(jì)
banner供置、瓷片區(qū)和白色模板化banner
首頁(yè)和個(gè)人中心兩者的差異：
運(yùn)營(yíng)：引導(dǎo)用戶點(diǎn)擊
UI功能：幫助用戶完成操作
從縱深Z軸谨湘，看潔面組成：平而不扁
banner
背景細(xì)節(jié)
漸變背景
1、同色系飽和漸變
2芥丧、不同色系 色相＋飽和度變化
紋理背景
1紧阔、方塊紋理：? ? ??
（1）網(wǎng)格化
（2）比背景深，但第一感覺不明顯
（3）可適當(dāng)隱去续担，保證文字清晰可見（擦去文字背后或banner邊角）
2擅耽、圓形紋理：?
（1）平鋪
（2）比背景深，但第一感覺不明顯
（3）可適當(dāng)隱去赤拒，保證文字清晰可見（擦去文字背后或banner邊角）
3秫筏、層次感：
（1）商品圖后采用形狀襯托（雙橢圓融合）
（2）雙橢圓與背景色為鄰近色
（3）細(xì)節(jié)累加：漸變方塊／圓形紋理
背景鄰近與對(duì)比
1、鄰近技巧：（26歲左右職場(chǎng)白領(lǐng)用戶）
a挎挖、主色調(diào)和背景鄰近（模特圖和背景）
b这敬、副色調(diào)和點(diǎn)綴鄰近（模特圖和點(diǎn)綴）
1、對(duì)比原則：（23歲左右的學(xué)生用戶）
a蕉朵、主色調(diào)和背景對(duì)比崔涂，拉開視覺差距，多色系（但少于等于4色始衅，不算點(diǎn)綴）
b冷蚂、一定要注意標(biāo)簽顏色
使用誤區(qū)：不要為了刻意炫技缭保、保持banner可讀性、使用場(chǎng)景有限蝙茶，僅適用電商艺骂；
文案排版
banner字體占比
1、高度占比：40%－50%
2隆夯、主文案：90-120px（4-6個(gè)字） 副文案：28px
banner字體
1钳恕、副文案纖細(xì)字體：小米蘭亭、方正蘭亭纖黑蹄衷、方正蘭亭超細(xì)黑忧额、華文黑體
2、粗體類字體（標(biāo)題）：方正蘭亭中黑／超粗愧口、方正正中黑睦番、造字工房尚黑
3、促銷類字體（電商耍属、促銷）：造字工房版黑／勁黑托嚣、華康伉金黑、方正粗譚黑恬涧、愛度綜藝簡(jiǎn)體注益；
4、書法字體：含義尚巍手書溯捆、漢儀綜藝體丑搔、李旭科書法、葉有根書法體提揍；
5啤月、女裝纖巧類字體：含義瑞意宋、含義宋韻朗黑劳跃、方正方正清刻悅宋（需要變形調(diào)整）
6谎仲、鋼勁字體：蒙納簡(jiǎn)超剛黑、造字工坊力黑刨仑、造字工房尚黑郑诺、張海山銳諧體
字體排版方式
1、部分遮擋（遮擋一行的20%杉武，一般是數(shù)字類）不影響閱讀
2辙诞、微傾斜創(chuàng)造空間感；
3轻抱、錯(cuò)層陰影：主文案采用適當(dāng)?shù)腻e(cuò)層陰影
4飞涂、文字點(diǎn)綴：副文案比較短時(shí)，可以搭配外描邊和主文案一樣長(zhǎng)，也可以加上間隔符较店；
商品模特
圖片定位
1士八、64開
2、黃金螺旋曲線
第一步64原則進(jìn)行板塊拆分梁呈，使用斐波那契數(shù)列細(xì)節(jié)定位圖片位置
模特圖品控
1婚度、不要全身
2、到底賣什么
3捧杉、鄰近對(duì)比原則
多圖組合
1陕见、多點(diǎn)傳達(dá)秘血，總有一個(gè)適合你味抖，激發(fā)關(guān)注
2、高價(jià)商品帶動(dòng)低價(jià)商品
3灰粮、模特圖背后仔涩，產(chǎn)品斜45度兩邊飛散
4、產(chǎn)品空白位置補(bǔ)充粘舟，防止banner過于空洞
點(diǎn)綴元素
圓球點(diǎn)綴
1熔脂、白色（方便上）、描邊柑肴、有色（盡量是鄰近色）
2霞揉、圓球點(diǎn)綴（超寫實(shí)－搭配墻角類）
形狀點(diǎn)綴
1、適應(yīng)用于年輕化的不規(guī)則形狀點(diǎn)綴（除卻小三角晰骑、彩條）
2适秩、標(biāo)簽點(diǎn)綴法（賣點(diǎn)文案提煉）（微質(zhì)感短線、粗細(xì)結(jié)合 形狀）
3硕舆、實(shí)物點(diǎn)綴（適合中央布局秽荞，比如中間金幣）
banner實(shí)戰(zhàn)：
1、先構(gòu)圖（46+螺旋）
2抚官、背景設(shè)計(jì)（如果banner不是通欄只能使用鄰近色）
3扬跋、擺放商品
4、文案大小排版
5凌节、點(diǎn)綴標(biāo)簽
瓷片區(qū)
以圖＋文為主要視覺呈現(xiàn)的運(yùn)營(yíng)位置
適用場(chǎng)景：運(yùn)營(yíng)內(nèi)容區(qū)钦听，適用于：平臺(tái)、電商倍奢、泛娛樂化朴上、屬于流量導(dǎo)流出口不適用于工具類；
圖片
細(xì)節(jié)：
1娱挨、注意圖片素材質(zhì)量余指；
2、使用多種食物組合
3、圖片色調(diào)明亮酵镜，飽和度高
4碉碉、配圖簡(jiǎn)介，呼吸感強(qiáng)淮韭，干凈摳圖處理
5垢粮、統(tǒng)一圖片高度與視覺面積
6、圖片處理：局部裁剪（常用于酒店類靠粪、旅行類產(chǎn)品）蜡吧、信息摳圖（常用于電商平臺(tái)類）、圖片組合（餐飲占键、平臺(tái)不同素材口吐進(jìn)行重新組合）
文字
主文案
字體：平方semibold
顏色＃333333
字號(hào)：34px
副文案
字體：平方regular
顏色＃666666
字號(hào)：26px
文字細(xì)節(jié)：為了凸顯重要業(yè)務(wù)板塊可以使用差別化昔善；匹配業(yè)務(wù)特點(diǎn)；
標(biāo)簽類文字：
（1）常用語(yǔ)酒店類畔乙、旅行類
（2）標(biāo)簽氛圍主副文案
（3）鄰近＋業(yè)務(wù)屬性
排版方式：（2個(gè)組合）
對(duì)角線排版
上下排版
左右排版
背景
微漸變背景：＃fafafa～＃f8f8f8f8
純色背景：在色彩板左上角的位置君仆，E、F的位置牲距；
點(diǎn)綴
底板（干凈返咱、淺）＋點(diǎn)綴（）
視覺效果飽滿
突顯品質(zhì)感
設(shè)計(jì)趨勢(shì)調(diào)研與視覺競(jìng)品分析
落地＋提升細(xì)節(jié)
不盲目借鑒：系統(tǒng)界面設(shè)計(jì)和應(yīng)用界面設(shè)計(jì)有很大區(qū)別；
為產(chǎn)品所用：做好設(shè)計(jì)的本質(zhì)角色：服務(wù)
能言之有物：有理論支撐牍鞠，不僅是視覺咖摹；
iOS11設(shè)計(jì)語(yǔ)言：大而簡(jiǎn)，簡(jiǎn)而精（主設(shè)計(jì)思路）? ?
布局难述、文字萤晴、圖標(biāo)、交互層龄广、點(diǎn)擊強(qiáng)化
布局：
（1）布局精簡(jiǎn)硫眯、減少分裂，減少思考（減少界面分隔择同，過渡更流暢两入，幫助用戶做出選擇）
（2）一維分析法的應(yīng)用（有什么用？提高用戶瀏覽節(jié)奏敲才。適合什么產(chǎn)品裹纳？feed流、圖片流產(chǎn)品紧武。具體怎么操作剃氧？增加沉靜感，3＋1的模式（三個(gè)白色卡片搭配一個(gè)彩色卡片 ））
（3）卡片的彌散效果（iOS11首頁(yè)變成卡片彌散效果）
高級(jí)灰阻星、80-90%縮小朋鞍、羽化
使用卡片可能會(huì)出現(xiàn)的問題：（1）使用卡片之后已添，出現(xiàn)雙重頁(yè)邊距；（2）層級(jí)不清晰
卡片的啟示：
（1）不能盲目使用滥酥，不可大規(guī)模使用
（2）突顯某一重點(diǎn)板塊才可使用
正確使用卡片懸浮效果：
浮層實(shí)用的兩個(gè)條件：
（1）重點(diǎn)功能梳理：十字交叉分析
（2）可通過任務(wù)測(cè)試
文字
層次性體現(xiàn)：對(duì)比iOS10和11的系統(tǒng)日歷更舞；
需要突顯的模塊：
1、組件簡(jiǎn)單：突顯一處? ? ??
2坎吻、組建復(fù)雜：凸顯兩處
使用十字交叉法：（對(duì)產(chǎn)品緊急程度缆蝉、對(duì)用戶重要程度）重要＊3 一般＊2 不重要＊1??
所以標(biāo)題為3*3=9分? ? 價(jià)格＝9? 其他的內(nèi)容也這么分析
主題色文字
1、代表功能入口
2瘦真、代表被選中
重點(diǎn)字體包突顯：之前說過的
圖標(biāo)
1刊头、圖標(biāo)的三種層次：辨識(shí)度、統(tǒng)一度诸尽、突顯度
（1）辨識(shí)度：
任務(wù)測(cè)試＋相關(guān)圖片搜索
（2）統(tǒng)一度：使用圖標(biāo)盒子原杂，盡量少用奇怪形狀
視覺構(gòu)成、描邊粗細(xì)弦讽、圓角大小
（3）突顯度
2個(gè)層次：a污尉、選中和未選中顏色對(duì)比、線面對(duì)比? b往产、角標(biāo)處理（小紅點(diǎn)or數(shù)字）
2、新處理手法：縮減法
把icon做成該頁(yè)面的抽象化某宪，適用于新功能仿村、新界面（eg）appstore首頁(yè)icon
3、全面性時(shí)代
現(xiàn)實(shí)生活中大多數(shù)物體是面性的
交互層（設(shè)計(jì)切入角度很好）
交互設(shè)計(jì)的指導(dǎo)思維：交互減不長(zhǎng)
減少用戶交互的步驟
比如KTV點(diǎn)歌系統(tǒng)：
根據(jù)用戶點(diǎn)歌偏好智能推送歌單
通過體驗(yàn)性設(shè)計(jì)的融入兴喂，提高用戶體驗(yàn)
（1）優(yōu)化精簡(jiǎn)點(diǎn)歌流程 （2）讓設(shè)備更利于己化 （3）提升服務(wù)與響應(yīng)
點(diǎn)擊強(qiáng)化
減少思考蔼囊、明確出口
1、哪個(gè)可點(diǎn)衣迷、哪里不可點(diǎn)擊
2畏鼓、交互入口清晰（采用面性圖標(biāo)和有顏色的字體）
結(jié)果導(dǎo)向：
增加設(shè)計(jì)導(dǎo)向能力，通過視覺研究壶谒，最終如何影響到界面云矫；
產(chǎn)品導(dǎo)向：
（1）通過用戶界面的消費(fèi)行為特征：千人千面，產(chǎn)品內(nèi)容定制化（影響細(xì)節(jié)）
（2）十字交叉分析（影響排版）
（3）場(chǎng)景分析（明確主要功能入口）痛點(diǎn)分析時(shí)要結(jié)合場(chǎng)景汗菜，最好競(jìng)品沒有
（4）情緒版（讓色彩有理有據(jù)）
谷歌Material Design
App让禀、web、平板都適用
實(shí)體感隱喻陨界；鮮明巡揍、形象、深思熟慮菌瘪；有意義的動(dòng)畫效果腮敌；
板塊劃分：狀態(tài)欄、操作欄、標(biāo)簽欄糜工、卡片內(nèi)容斗这、虛擬功能鍵；
狀態(tài)欄
一般會(huì)＋20%的黑色遮罩啤斗，做出區(qū)分表箭；
操作欄
1、向上：點(diǎn)擊后渠道當(dāng)前頁(yè)面的上一個(gè)層次
2钮莲、Spinner：用戶展示內(nèi)容的下拉彩蛋免钻，包括試圖的快速切換
3、操作按鈕：最重要的動(dòng)作崔拥，次要的操作集合在更多操作极舔，長(zhǎng)按查看動(dòng)作名字
4、更多操作：集合操作欄中不上用和非重要的操作
標(biāo)簽欄
卡片內(nèi)容
層級(jí)（使用陰影分開链瓦，層次越高陰影越強(qiáng)拆魏，實(shí)體隱喻）
圓角2dp；
虛擬功能鍵
和系統(tǒng)重復(fù)
MD用色
1慈俯、產(chǎn)品功能給用戶的情緒
2渤刃、由主題色而定的一系列衍生顏色
懸浮模塊
對(duì)用戶來說會(huì)動(dòng)的功能位置，并不易于使用贴膘；固定位置簡(jiǎn)化用戶理解成本
圖標(biāo)板塊
懸浮按鈕卖子、扁平常規(guī)按鈕、舵駛按鈕
薄弱點(diǎn)專項(xiàng)突破
核心兩大問題：明確使用場(chǎng)景刑峡、明確設(shè)計(jì)細(xì)節(jié)
規(guī)范
設(shè)計(jì)規(guī)范按照模塊做成側(cè)邊欄形式洋闽，方便查找
布局規(guī)范
可以放置圖片或部分截圖，并進(jìn)行詳細(xì)說明突梦。增加細(xì)節(jié)點(diǎn)思考：如何更有質(zhì)感诫舅，
標(biāo)簽
高度和呼吸感要在圖中標(biāo)注出來；標(biāo)簽如何而來宫患？刊懈；高難度問題：你這個(gè)方案是不是最佳方案之一？為什么撮奏？
注意要點(diǎn)：
1俏讹、文字：
2、標(biāo)簽高度：
3畜吊、呼吸感：
4泽疆、字體包：
細(xì)節(jié)點(diǎn)思考：標(biāo)簽的兩大作用是什么？（用戶畫像的消費(fèi)行為特征）
白色模板化banner
使用在頁(yè)面中央玲献，個(gè)人中心頁(yè)和二級(jí)子頁(yè)面殉疼；
在視覺的吸引層次上融入整個(gè)頁(yè)面
構(gòu)成：插畫梯浪、文字、留白瓢娜；
文字：
1挂洛、使用首頁(yè)自帶字體（融入頁(yè)面不凸顯，不打亂用戶的注意力）眠砾，不要拉開太大差距
2虏劲、主副文案層級(jí)、字里褒颈、字號(hào)顏色
3柒巫、色彩文字突出重要信息，顏色與插畫配色呼應(yīng)or顏色情緒
排版用的什么方法論：十字交叉分析
文字技巧
高度空間占比：50%
具體字號(hào)：40-50px谷丸；
副文案：26-30px堡掏；
字體顏色技巧：色彩聯(lián)系＋色彩情緒
色彩聯(lián)系：和banner鄰近色、產(chǎn)品品牌色
色彩情緒：科技感藍(lán)色
留白：
頁(yè)邊距刨疼；
插圖：
找到合適的圖片泉唁，進(jìn)行簡(jiǎn)化梳理
插圖情緒版的實(shí)現(xiàn)方法：eg）主標(biāo)題：新春出游季 副標(biāo)題：限時(shí)特購(gòu)，全場(chǎng)瘋搶
1揩慕、確定原聲關(guān)鍵詞? ?——新春亭畜、出游、低價(jià)
2漩绵、確定衍生關(guān)鍵詞? 通過視覺中國(guó)——新春：樹葉贱案、天空； 出游：道路止吐、沙灘、靠椅侨糟；低價(jià)：優(yōu)惠券
3碍扔、圖片搜集，建立圖片庫(kù) ——搜索衍生關(guān)鍵詞在視覺中國(guó)看照片素材秕重，在花瓣上找圖片參考手法不同，還原現(xiàn)實(shí)圖片
4、圖形轉(zhuǎn)化——首先簡(jiǎn)筆畫溶耘，其次融入花瓣圖片庫(kù)細(xì)節(jié)
插畫類點(diǎn)綴技巧
1二拐、顆粒感；
（1）新建圖層
（2）輪廓調(diào)色 上淺下深
（3）蒙版擦去
2凳兵、MBE風(fēng)格
（1）小圓
（2）小方塊
（3）小十字
iOS設(shè)計(jì)轉(zhuǎn)換成MD設(shè)計(jì)
1百新、尺寸調(diào)整
2、導(dǎo)航欄調(diào)整庐扫、工具欄調(diào)整（部分app會(huì)把tab欄放在頂部）
3饭望、控件調(diào)整
4仗哨、功能入口細(xì)節(jié)調(diào)整（和產(chǎn)品溝通）
安卓：狀態(tài)欄48px，導(dǎo)航欄：112px铅辞；
設(shè)計(jì)師種類：用戶研究員厌漂、交互設(shè)計(jì)師、UI設(shè)計(jì)師斟珊、運(yùn)營(yíng)設(shè)計(jì)苇倡、品牌設(shè)計(jì)；
視覺可用性測(cè)試
UI提升的本質(zhì)路徑：
1囤踩、設(shè)計(jì)前期分析：用戶畫像旨椒、5wh產(chǎn)品分析、場(chǎng)景走查
2高职、設(shè)計(jì)中期精細(xì)度提升：能夠指引設(shè)計(jì)細(xì)節(jié)的規(guī)范體系
3钩乍、設(shè)計(jì)后期的驗(yàn)證調(diào)研工作：保證設(shè)計(jì)方案的正確性和合理性
KANO模型：
1、魅力因素：提供用戶想不到的需求會(huì)很大的提升用戶滿意度怔锌，不提供則滿意度不變寥粹；（3）
2、期望因素：提供期望需求測(cè)滿意度會(huì)上升埃元，不提供則下降涝涤；（2）
3、必備因素：優(yōu)化此需求用戶滿意度不變岛杀，不優(yōu)化則滿意度大幅下降阔拳；（1）
4、無差異因素：用戶根本不在意的功能需求类嗤；（4）
5糊肠、反向因素：無次需求滿意度不變，有此需求則滿意度下降遗锣；（不做）
十字交叉法：對(duì)用戶的重要性货裹、對(duì)產(chǎn)品的緊急性；
在設(shè)計(jì)的原型排版階段和版本迭代階段
1精偿、結(jié)合KANO模型：判斷對(duì)用戶的重要性
2弧圆、對(duì)公司而言的緊急程度：UV＊轉(zhuǎn)化率
PV（訪問量）：即Page View, 即頁(yè)面瀏覽量或點(diǎn)擊量，用戶每次刷新即被計(jì)算一次笔咽。
UV(獨(dú)立訪客)：即Unique Visitor,訪問您網(wǎng)站的一臺(tái)電腦客戶端為一個(gè)訪客吼旧。00:00-24:00內(nèi)相同的客戶端只被計(jì)算一次燃观。
IP(獨(dú)立IP)：指獨(dú)立IP數(shù)寡喝。00:00-24:00內(nèi)相同IP地址之被計(jì)算一次圆仔。
提高UI可用性的兩個(gè)方法：
1、場(chǎng)景分析
2扶叉、任務(wù)測(cè)試
布局可用性
界面瀏覽測(cè)試：
1勿锅、這個(gè)頁(yè)面中什么地方最吸引你帕膜？驗(yàn)證視覺傳達(dá)是否合理且符合預(yù)期
2、你認(rèn)為這個(gè)頁(yè)面的作用是什么溢十？界面十一功能傳遞為主垮刹，不是只發(fā)揮視覺審美
3、當(dāng)你使用這個(gè)頁(yè)面张弛，是否會(huì)使用他們提供的功能荒典？驗(yàn)證產(chǎn)品優(yōu)點(diǎn)是否傳遞清楚，驗(yàn)證產(chǎn)品是否有差異化
6步模板化產(chǎn)品分析方法
5wh? 產(chǎn)品背景（what）—— 目標(biāo)人群（who）—— 預(yù)期目標(biāo)（why）—— 使用場(chǎng)景（where）—— 使用節(jié)點(diǎn)（when）—— 如何使用（how）
產(chǎn)品背景：
要做什么（這個(gè)產(chǎn)品是什么東西）吞鸭，
競(jìng)品狀況（競(jìng)品是怎么做的）寺董，
行業(yè)資料（統(tǒng)一產(chǎn)品，行業(yè)平均值是多少）
目標(biāo)人群：
人群年齡（主要用戶集中在哪個(gè)區(qū)間）
性別分布（男女比例如何）
興趣特征（業(yè)余喜歡干什么）
預(yù)期目標(biāo)：
想要解決什么（如何解決刻剥，復(fù)現(xiàn)一下）
有沒有替代方案（行業(yè)中有沒有成熟解決方案遮咖，是否需要借鑒）
使用場(chǎng)景：
交互旅程圖： 在這個(gè)需求中，用戶從哪里來造虏，又到哪里去
場(chǎng)景特征：是昏暗的環(huán)境還是明亮環(huán)境御吞，有無干擾；
用戶心理：用戶在場(chǎng)景中漓藕，心理狀態(tài)如何陶珠，是平穩(wěn)、焦慮還是具有非常強(qiáng)的行為目的（有的時(shí)候迎合用戶心理享钞，有的時(shí)候舒緩用戶心理揍诽，看具體使用場(chǎng)景）
常見界面功能目的：
如何達(dá)到首頁(yè)功能目的流量分發(fā)：了解用戶（用戶畫像 三大模板、5wh 四大環(huán)節(jié)）栗竖、布局極限平衡（排版方式多樣暑脆、細(xì)節(jié)一致）
了解用戶??
1、用戶畫像 三大模板
（1）用戶人口和社會(huì)特征（影響顏色狐肢、視覺細(xì)節(jié)）
（2）消費(fèi)行為特征（影響文案細(xì)節(jié)）
（3）其他動(dòng)態(tài)屬性（找準(zhǔn)推廣渠道）
2饵筑、5WH 四大環(huán)節(jié)
Feed流／圖片流 功能目的：增強(qiáng)瀏覽強(qiáng)度，看更多內(nèi)容 处坪； 方法：一維分析法；
卡片／列表流 功能目的：盡快找到功能入口架专；方法：增加文案吸引力：用戶畫像同窘；
詳情頁(yè) 功能目的：轉(zhuǎn)化，買買買部脚；方法：建立認(rèn)知－增加信任－（促使下單）
情緒版能影響設(shè)計(jì)細(xì)節(jié)：比如尖刀和頭盔想邦，頭盔更能給人安全感，因此會(huì)有圓潤(rùn)的感覺
圖標(biāo)可用性：
理解性委刘、突顯／預(yù)測(cè)性丧没、鏈接業(yè)務(wù)
連接業(yè)務(wù)（設(shè)計(jì)細(xì)節(jié)＋顏色）
1鹰椒、色彩連接——匹配業(yè)務(wù)，同色系類似業(yè)務(wù)線
2呕童、情緒版細(xì)節(jié)
顏色可用性
無障礙測(cè)試漆际、色彩情緒、色彩連接
無障礙測(cè)試：強(qiáng)光測(cè)試夺饲、色盲色弱測(cè)試奸汇；
色彩連接：前后頁(yè)面連接，色彩對(duì)應(yīng)往声；
數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)
設(shè)計(jì)后期的方法論
如何保證設(shè)計(jì)方案的正確性：設(shè)計(jì)后期查看數(shù)據(jù)擂找；
設(shè)計(jì)本質(zhì)：服務(wù)產(chǎn)品、服務(wù)用戶
服務(wù)產(chǎn)品：突顯產(chǎn)品調(diào)性浩销，優(yōu)化核心轉(zhuǎn)化流程? ?（轉(zhuǎn)化率贯涎、UV）
服務(wù)用戶：提高界面的可用性、美觀性（用戶體驗(yàn)指標(biāo)慢洋、任務(wù)測(cè)試／界面瀏覽測(cè)試完成率）
數(shù)據(jù)：轉(zhuǎn)化率塘雳、UV、用戶體驗(yàn)且警、測(cè)試指標(biāo)
轉(zhuǎn)化率＝成功頁(yè)／初始頁(yè)面（不一定入口首頁(yè)）
注冊(cè)轉(zhuǎn)化率＝注冊(cè)成功／點(diǎn)擊注冊(cè)頁(yè)面數(shù)量
用戶體驗(yàn)：
如何評(píng)判XX產(chǎn)品好壞粉捻？
用戶體驗(yàn)衡量指標(biāo)＝差評(píng)＋用戶來電／總訂單量
測(cè)試指標(biāo)：
相較于上個(gè)版本完成率有所上升；
googleGSM數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)
G： goal 識(shí)別目標(biāo)
S：singal 推導(dǎo)表現(xiàn)
M：metric 驗(yàn)證數(shù)據(jù)
數(shù)據(jù)目標(biāo)（G）－目標(biāo)用戶分析－具體問題描述－用戶表現(xiàn)（s）－產(chǎn)品設(shè)計(jì)策略－衡量指標(biāo)（m）
提升留存：用戶離開斑芜，又回來繼續(xù)使用并使用頻次增加
step1: 數(shù)據(jù)目標(biāo)－提升用戶留存肩刃；
step2: 目標(biāo)用戶分析（是誰、特征是什么）－場(chǎng)景分析杏头、4wh? eg）騰訊應(yīng)用市場(chǎng)——游戲下載用戶——下載完就離開盈包，不愿意主動(dòng)付費(fèi)
step3: 具體問題描述（本質(zhì)問題理解）－服務(wù)產(chǎn)品（產(chǎn)品想要提高留存－但用戶用完即走）＋服務(wù)用戶（用戶下載游戲后遇到了瓶頸－且不想付費(fèi)）
step4: 用戶表現(xiàn)：希望讓用戶回到應(yīng)用商店——（1）線上攻略分享（2）線上玩家游戲互動(dòng)社區(qū)（3）有動(dòng)力回到應(yīng)用商店
step5:?產(chǎn)品設(shè)計(jì)策略：用戶需要（社區(qū)、攻略解決游戲瓶頸）＋產(chǎn)品提供（上線社區(qū)＋攻略功能）小成本——用虛擬物品
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 有動(dòng)力回到APP 獲得付費(fèi)道具? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 老玩家《------------------------------------------》新玩家? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 有動(dòng)力回到產(chǎn)品 快速進(jìn)步游戲攻略
設(shè)計(jì)前中后
1醇王、前期分析
- 產(chǎn)品背景：5wh
-?字段呢燥、設(shè)計(jì)定位：用戶畫像
- 產(chǎn)品目標(biāo)不明確：4w場(chǎng)景分析
- 展現(xiàn)優(yōu)先級(jí)不明確：KANO模型
- 色彩偏差：情緒版
- 最高級(jí)別展示設(shè)計(jì)價(jià)值：GSM數(shù)據(jù)驅(qū)動(dòng)價(jià)值
2、設(shè)計(jì)細(xì)節(jié)
- 排版先后更有邏輯：十字交叉分析
- 增加頁(yè)面沉浸感： 一維分析法
- 詳情頁(yè)主線設(shè)計(jì)思路：建立認(rèn)知寓娩、增加信任叛氨、促使下單
- 顏色對(duì)比：強(qiáng)光測(cè)試
- 圖標(biāo)大小控制： 黃金比例、圖標(biāo)盒子
- 間距分割棘伴、位置定位：黃金分割寞埠、5分原則、斐波那契數(shù)列
3焊夸、設(shè)計(jì)驗(yàn)證
- 驗(yàn)證用戶是否能流暢完成主要功能：任務(wù)測(cè)試
- 顏色仁连、布局、圖標(biāo)的可用性測(cè)試：視覺可用性阱穗、界面瀏覽測(cè)試
- 客觀衡量上線后的界面表現(xiàn)情況：數(shù)據(jù)
正確的動(dòng)效設(shè)計(jì)思維
利用KANO模型推動(dòng)有意義的動(dòng)效
好的動(dòng)效應(yīng)該是隱形的饭冬，好的動(dòng)效應(yīng)該是以提高可用性為前提使鹅，并且以令聞?dòng)X得自然含蓄的方式提供有效用戶反饋的一種機(jī)制。
服務(wù)產(chǎn)品：突顯產(chǎn)品調(diào)性昌抠，優(yōu)化核心轉(zhuǎn)化流程患朱；? 服務(wù)用戶：提高界面的可用性、美觀性扰魂；
動(dòng)效服務(wù)產(chǎn)品：突顯關(guān)鍵內(nèi)容麦乞；服務(wù)用戶：幫助用戶理解產(chǎn)品，降低使用門檻劝评；
eg）重點(diǎn)Banner出現(xiàn)動(dòng)效姐直，能很快速的提高UV；
動(dòng)效功能：
1蒋畜、體現(xiàn)交互層次
2声畏、短時(shí)間內(nèi)理解頁(yè)面層級(jí)
3、減少人們的認(rèn)知負(fù)擔(dān)
4姻成、等待不枯燥插龄、變化不生硬、反饋不單調(diào)科展、體驗(yàn)有情感均牢、用戶更愉悅
eg：兜底加載——占位圖或默認(rèn)動(dòng)畫——等待不枯燥
時(shí)間軸動(dòng)效軟件：PS、AE才睹、principle?? ? 節(jié)點(diǎn)流動(dòng)效軟件：origami徘跪、Flinto、Hype3? 代碼級(jí)動(dòng)效軟件：Quartz composer
交互動(dòng)效手勢(shì)
點(diǎn)擊琅攘、雙擊垮庐、滑動(dòng)、下拉坞琴、上拉哨查、長(zhǎng)按、拖拽剧辐、兩指縮放寒亥、搖一搖
點(diǎn)擊——跳往下一頁(yè) ；? ?
雙擊——放大圖片荧关、視頻? 护盈；
下拉——下拉刷新；
上拉——加載更多羞酗；
長(zhǎng)按——編輯、刪除
動(dòng)效組成核心
移動(dòng)紊服、旋轉(zhuǎn)檀轨、縮放胸竞、不透明度
動(dòng)效需求分析與demo構(gòu)建
合理動(dòng)效的三大特點(diǎn)：隱形（克制）、提高可用性参萄、提供反饋
動(dòng)效服務(wù)產(chǎn)品：突顯關(guān)鍵內(nèi)容卫枝；服務(wù)用戶：幫助用戶理解產(chǎn)品，降低使用門檻讹挎；
動(dòng)效提高可用性
未完待續(xù)....
