國際體驗設(shè)計大會ixdcb5-工作坊

阿里商家設(shè)計規(guī)范的策略與實ANDOF 題綱設(shè)計規(guī)范-確認(rèn)需求設(shè)計規(guī)范-制定規(guī)范和完善設(shè)計規(guī)范-推進和迭代案例：多品牌設(shè)計規(guī)范推動-阿里商家規(guī)范?2016Alibaba ?2016AlibabaGroups

POMI=波米=?2016Alibaba ?2016Alibaba 阿里隸屬于阿里巴巴，是國內(nèi)領(lǐng)先大數(shù)據(jù)平臺，擁有阿里巴巴的商業(yè)數(shù)據(jù)。數(shù)字（PC端+無線端+互聯(lián)網(wǎng)電視端）的一站式觸達。?2016Alibaba 今天你將會?2016Alibaba 組員請相互自我?2016Alibaba 先統(tǒng)一下組件／模塊（Table）?2016Alibaba ?2016Alibaba 做設(shè)計規(guī)范是為了什?2016AlibabaGroups-wiki 百科?2016Alibaba 透 體驗一致復(fù)

協(xié) 量 規(guī)

獨特 ?2016Alibaba ?2016AlibabaGroups收集需 制定規(guī) 規(guī)范完

推動設(shè)前 迭?2016Alibaba 所以遇到 收集需 制定規(guī)

規(guī)范

推動設(shè)前 迭 ?2016Alibaba 收集需?2016Alibaba

收集需&制定規(guī)?2016Alibaba

制定規(guī)&規(guī)范完?2016Alibaba

制定規(guī)?2016Alibaba

規(guī)?2016Alibaba

以升收集需 制定規(guī)

規(guī)范

推動設(shè)前 迭

提煉關(guān)鍵頁面及組件用建立樣本

對內(nèi)策

?2016Alibaba 一.收集需求升收集需

制定規(guī)

規(guī)范

推動設(shè)前 迭

提煉關(guān)鍵頁面及組件用建立樣本

規(guī)范文檔

對內(nèi)策

?2016Alibaba 規(guī)范要跟上設(shè)計趨怎么定規(guī)范才好前端/可以快點上就要好用的介?2016Alibaba ?2016Alibaba 團隊組人數(shù)、分布、年

業(yè)務(wù)特開放、獨立、業(yè)務(wù)成熟度、終規(guī)范有無規(guī)范、迭代、升

內(nèi)外在公司文化、設(shè)計趨勢、競爭、技?2016Alibaba ,Apple,微軟

AP?2016Alibaba 案例：天貓商家端規(guī)范設(shè)計確 80＋業(yè) ，純Web，全中 2個月＋?2016Alibaba 回去寫下你的設(shè)計規(guī)范確?2016Alibaba 設(shè)計語視覺指組控終實資設(shè)計理視覺風(fēng)定PC產(chǎn)品范設(shè)計工交品牌故構(gòu)無線文視Log使用規(guī)動字多場景交互形色標(biāo)圖動網(wǎng)格系吉祥周邊案?2016Alibaba 雭雿傞 ぐ絆?邍傞 你今年7月加入了一家剛成立不久的新創(chuàng)公司設(shè)計團隊，設(shè)計師加你5個人，公司主要是做 業(yè)務(wù)，包括前臺app跟 希望9月份有第一個版本上線你設(shè)計規(guī)范涵蓋的范圍里會有哪些？為什么?2016Alibaba 升收集需 制定規(guī)

規(guī)范

推動設(shè)前 迭

提煉關(guān)鍵頁面及組件用建立樣本

規(guī)范文檔

對內(nèi)策

?2016Alibaba 驗交互、視覺、動效 來驗

設(shè)計驗交關(guān)鍵組件

來 來設(shè)計樣本驗設(shè)計樣本?2016Alibaba 商品/…?2016Alibaba 商品/…

發(fā)貨中、庫存的寶貝…?2016Alibaba 商品/…

…

…?2016Alibaba 商品/…

商 要準(zhǔn)備多大 …

怎么 做的 …

買家 評價好的…?2016Alibaba 商品/…

怎么管 賣出去…

…

買家 評價好的…

…?2016Alibaba 商品/…

發(fā)貨中、庫存的寶貝…

…

…

…

會員怎 …?2016Alibaba

怎么 做的 無線上 想要客 化怎么做

客 我 了或是我要

商品/…

發(fā)貨中、庫存的寶貝…

…

…

會員怎 …

權(quán)益怎

天 的規(guī)則跟目…?2016Alibaba 入續(xù)品

裝淘寶無線運營空

交易評價

淘寶物淘寶網(wǎng)服務(wù)中供銷平企業(yè)采

天貓品

互動到

申訴中退款管管

喵言喵天貓早知天幫助中退帳子帳 產(chǎn)品發(fā)

提前

線下門店管關(guān)

TP運營品牌會員中商家中?2016Alibaba 商家端體驗設(shè)計

?2016Alibaba 天 設(shè)計規(guī)范模

（規(guī)范+品牌特色?2016Alibaba

關(guān)鍵場景（復(fù)用性、代表性’、最主要操作場景天貓入駐前 活動商品發(fā) 招商活動報

創(chuàng)建表出關(guān)鍵組

鈕表單篩

公告鈕表單篩

息提 規(guī)范＆場?2016Alibaba

·按鈕：主要按鈕跟次要按鈕組合時，主要按鈕需放在最左邊? 框 STEP1關(guān)鍵場景及代表性頁?2016Alibaba

老版天貓表單

老版天貓表單STEP2 關(guān)鍵組件-按鈕優(yōu)先定義最主 控件-可復(fù)用，具不可取代?2016Alibaba STEP3：提煉 規(guī)范&場景-按設(shè)計專業(yè)出發(fā) ?2016Alibaba 定義（內(nèi)容

規(guī)則用法（內(nèi)容?2016AlibabaGroup 主要按 次要按 禁?2016Alibaba ?2016Alibaba 分組動手做-請抽取出框的規(guī) 時間:2分?2016AlibabaGroups框阻礙 框絕 ?2016Alibaba 利用視覺策略推進規(guī)范制從交互、視覺、動效上，塑一致化的設(shè)計語 視覺風(fēng)格的統(tǒng)一共識，如何讓設(shè)計方向更塑造差異化、具有獨特風(fēng)格的視覺

?2016Alibaba STEP1有效的視覺關(guān)鍵

強 高

簡 數(shù)字

?2016Alibaba STEP1有效的視覺關(guān)鍵 視 視

?2016Alibaba STEP1有效的視覺關(guān)鍵

?2016Alibaba STEP2：明 ，找準(zhǔn)對立質(zhì)扁質(zhì)扁擬抽擬抽幾有幾有活優(yōu)活優(yōu) ?2016Alibaba STEP2：明 ，找準(zhǔn)對立

沉 喧

沉 熱

?2016Alibaba 1234567S1234567

?2016Alibaba ?2016?2016Alibabas ST STEP3：維度細分2、足夠廣度的案3、充分討論和思辨的過程，耐心、提升功力1234567S1234567

?2016Alibaba 1234567S1234567

2?21234567S1234567

?2016Alibaba ?2016?2016Alibabas STEP4：精準(zhǔn)定位2、考慮跟競品拉開層次，建立獨特性。STEP5 VIVIVIVI?2016Alibaba

元素、法

Line,Shape,FormOrganicvsGeometryNegativevsPositiveStaticvs

Color

VisualTexture

BalanceUnity／HarmonyHierarchyBreakingtherules...

設(shè)計分

VisualIdentityDataVisualization

Designpatterns

?2016Alibaba 從收斂到發(fā)散，再從發(fā)散到收斂思維過程?2016Alibaba ?2016Alibaba 規(guī)范100?2016Alibaba 13控件?2016Alibaba Axure組控件?2016Alibaba 商家前臺x6商 x30 x20?2016Alibaba 三.推動升收集需 制定規(guī)

規(guī)范

推動設(shè)前 迭

提煉關(guān)鍵頁面及組件用建立樣本

規(guī)范文檔

對內(nèi)策

?2016POMI 幫你實現(xiàn)規(guī)范的那個人...前端

計設(shè)計規(guī)關(guān)鍵角色/建虛擬團

利益

建目標(biāo)/定時間

抓 執(zhí)行協(xié)?2016Alibaba 擬定規(guī)

目標(biāo)/時間

虛 ?前團 ?設(shè)產(chǎn)

商家端業(yè)務(wù)提體驗提

雙十一前完成提效30%

設(shè)計規(guī)范，前端組件

確保資源和支前 ?前虛擬前端團

底層技術(shù)升組件樣式庫

8月底完成主要組件開10月迭

底層代碼結(jié)構(gòu)、命名規(guī)命名數(shù)據(jù)化、視覺可視規(guī)范代

前端虛擬商家小設(shè)計＆前端例設(shè) ?設(shè)虛擬前端團

7月完成主要組件規(guī)

設(shè)計走查、設(shè)計規(guī)范制樣本規(guī) &設(shè)計文資源傾

設(shè)計接設(shè)計團隊設(shè)計＆前端例產(chǎn) ?商家線產(chǎn)

8月新產(chǎn)品使

商家線產(chǎn)品團隊統(tǒng)一進設(shè)計端培訓(xùn)課設(shè)計文檔組件

商家線產(chǎn)品團隊?2016Alibaba 正式推動前把所有人 搞

specialcase放入規(guī)范?2016Alibaba 推 ，規(guī)范有理有 糾結(jié)于specialcase要不要放入規(guī)

?2016Alibaba

?2016Alibaba 四.迭代升收集需 制定規(guī)

規(guī)范

推動設(shè)前 迭

提煉關(guān)鍵頁面及組件用建立樣本

規(guī)范文檔

對內(nèi)策

?2016POMI

?2016Alibaba 阿 1、品牌升級強有力的V 體驗升 服務(wù)人性?2016Alibaba 阿 2、 人的肩膀?qū)⑵放普{(diào)性帶入到視覺定在原有規(guī)范的基礎(chǔ)上體驗結(jié)合前端技術(shù)框架的設(shè)計與前端重用法輕?2016Alibaba 阿 2、 人的肩膀?qū)⑵放普{(diào)性帶入到視覺定在原有規(guī)范的基礎(chǔ)上體驗結(jié)合前端技術(shù)框架的設(shè)計與前端重用法輕?2016Alibaba 阿 2、 人的肩膀?qū)⑵放普{(diào)性帶入到視覺定在原有規(guī)范的基礎(chǔ)上體驗結(jié)合前端技術(shù)框架的設(shè)計與前端重用法輕?2016Alibaba 阿 3系統(tǒng)化的動效交互、視覺、動效、前端協(xié)調(diào)思?2016Alibaba 4組控

信息圖

2產(chǎn)品范

規(guī)范站?2016Alibaba 1品牌指

4組控

14場景和用

11動效原

1信息圖

6產(chǎn)品

規(guī)范站阿 規(guī)范平臺－MineCraft（重用法輕理論 對自己團隊的規(guī)范負

規(guī)范出了好久沒 一年一套規(guī)范，純KPI導(dǎo)向不要害怕迭代，看到問題 產(chǎn) ?2016Alibaba ?2016Alibaba 品

裝淘寶無線運營空

交易評價

淘寶物淘寶網(wǎng)服務(wù)中供銷平企業(yè)采

天貓品

互動到

退款管管

喵言喵天貓早知天幫助中退帳子帳

提前

線下門店管關(guān)

TP運營品牌會員中商家中?2016AlibabaGroups?2016Alibaba

國際UED-商家?2016Alibaba 7個事業(yè)部（2個無規(guī)范，3個正進行規(guī) 18項 3個月?2016Alibaba

確認(rèn)共同目標(biāo)意

?

?2016Alibaba 天 設(shè)計規(guī)范模?2016Alibaba 6-與淘寶、聚劃算特色樣式內(nèi)容各 設(shè)計規(guī) 框架?2016Alibaba 7-加入阿里、無溝通設(shè)計規(guī)范含框架及規(guī)范內(nèi)阿里接手阿里規(guī)范網(wǎng)?2016AlibabaGroups8-加入客戶體