2018年有意放緩了一些節(jié)奏拇囊，對今年的期望是沉淀和有效產(chǎn)出幻赚，希望能一步步達(dá)成目標(biāo)
最近一直在做卡券包的業(yè)務(wù)需求，活兒到手的時(shí)候只知道征冷，使用這些卡券的邏輯復(fù)雜择膝，所以大量的時(shí)間用在了梳理流程上。原以為流程梳理清楚了检激，后面的設(shè)計(jì)應(yīng)該就沒太大問題了肴捉，可是沒想到更大的難題在等著我腹侣。券樣式的設(shè)計(jì)比想象中復(fù)雜，需要在基礎(chǔ)結(jié)構(gòu)不變的情況下齿穗，對不同類型券的字段進(jìn)行個(gè)性化配置傲隶，這就需要在基礎(chǔ)樣式和個(gè)性化樣式設(shè)計(jì)中保持一個(gè)平衡，讓兩者在觀感上能看著一致又有區(qū)別
在獲取所有的字段和券內(nèi)信息優(yōu)先級之后窃页，于是開始了我的設(shè)計(jì)
-----------------------------------------------------------
整個(gè)設(shè)計(jì)過程大概分了5個(gè)步驟：找競品跺株、確定元素、信息結(jié)構(gòu)脖卖、卡券排版乒省、適配要點(diǎn)
1.找競品
由于以前沒做過卡券，自然會找一些現(xiàn)有其他卡券產(chǎn)品來看看畦木，于是我選取了網(wǎng)易系袖扛、淘寶系、京東系以及其他代表系四組作為主要參考十籍。
從券結(jié)構(gòu)來看蛆封，基本 = 滿減金額數(shù)字+一些券文字描述
從劵的樣式上，基本 = 色彩系 or 素色系
結(jié)論：
在劵結(jié)構(gòu)上基本都是左右或左中右結(jié)構(gòu)勾栗，這與移動端橫向結(jié)構(gòu)相關(guān)惨篱；另外，我們見到除了左右結(jié)構(gòu)的券以外围俘，有的券會出現(xiàn)上下結(jié)構(gòu)的情況砸讳，這種樣式的下半部分主要是為券的擴(kuò)展功能留出位置，一般來說券的上半部分為基礎(chǔ)信息界牡，下半部分為擴(kuò)展信息绣夺。
在券的色彩上，基本以本身產(chǎn)品的調(diào)性為主欢揖，并沒有固定的搭配，保守的做法一般是左券色又空白的做法奋蔚；這樣能讓信息有效區(qū)分她混，又能保證券型在視覺上的表達(dá)
Tips：至于券概念的表達(dá)，也一定程度上依賴于實(shí)際生活中泊碑；由于券的概念其實(shí)只是在國內(nèi)很普及坤按，但其他國家在電商購物上，券的概念并不明晰馒过，所以要植入此概念臭脓，需要去了解不同國家地區(qū)用戶對實(shí)體券的共識，以此為基礎(chǔ)作為設(shè)計(jì)基礎(chǔ)腹忽，能讓用戶更快的認(rèn)知和接受券概念
2.確定元素
在對競品有一定了解之后来累，我把所有可能出現(xiàn)在卡券上的元素一一列出砚作，這樣能對卡券有全面的認(rèn)知，能為不同的券樣式在設(shè)計(jì)時(shí)預(yù)留空間
券元素分為3個(gè)部分：圖片型元素嘹锁、文字型元素葫录、操作型元素
文字元素主要做說明作用，一般字段較長领猾，有折行的可能米同，在寬度上占用較多
圖片元素主要做提示作用，一般通過底色+單詞的形式出現(xiàn)摔竿，通過視覺的變化面粮，讓圖片型元素提示性更強(qiáng)
操作元素主要做行動作用，一般由按鈕或帶圖標(biāo)的文案形式出現(xiàn)继低，觸發(fā)后有后續(xù)動作熬苍，能幫助用戶進(jìn)行下一步操作
3.信息結(jié)構(gòu)
在前文參考卡券中，信息結(jié)構(gòu)在大致一致的情況下郁季，還是有細(xì)微的區(qū)別
主要有三種：左右結(jié)構(gòu)冷溃、左中右結(jié)構(gòu)以及上下抽屜結(jié)構(gòu)
a1. 左右結(jié)構(gòu)?
可以看到，這一類結(jié)構(gòu)中梦裂，數(shù)字居左似枕，操作居右；主要目的是符合視覺和操作習(xí)慣年柠，左邊的數(shù)字信息會第一時(shí)間展示在眼前凿歼，右邊的操作可以實(shí)時(shí)形成操作關(guān)聯(lián)，當(dāng)需要用券時(shí)冗恨，能第一時(shí)間觸達(dá)答憔。
而居于中間的券信息部分，則會根據(jù)具體設(shè)計(jì)需求掀抹，選擇與左邊的數(shù)字信息或右邊的操作信息發(fā)生強(qiáng)關(guān)聯(lián)
a2.左中右結(jié)構(gòu)
可以看到虐拓，左中右結(jié)構(gòu)把數(shù)字、文字和操作區(qū)做了明確的區(qū)分傲武。這樣的劵結(jié)構(gòu)常見于領(lǐng)券場景中限量劵的情況蓉驹，專門留出右側(cè)操作區(qū)是為了給特定該功能（比如進(jìn)度條）。此種券的樣式在存劵揪利、用券場景較少出現(xiàn)态兴。
所以有可能同種券在不同場景下，樣式上有可能并不會保持一致疟位，需要根據(jù)實(shí)際情況進(jìn)行調(diào)整瞻润。
從個(gè)人角度來看，雖然樣式會有所出入，但還是希望在大方向上樣式能保持一致绍撞。特別在首次設(shè)計(jì)時(shí)正勒，把這些問題考慮到，能為后期的設(shè)計(jì)擴(kuò)展避免掉很多問題
a3.上下抽屜結(jié)構(gòu)
我們可以看到楚午，當(dāng)券字段較多昭齐，需要描述券詳情的字段時(shí)，或券不只單純承載一種功能的情況下矾柜，會在劵的下側(cè)做一個(gè)樣式上的擴(kuò)展阱驾。這種做法一般是為了保證基礎(chǔ)券信息的清晰性，不至于一張券上容納過多的信息怪蔑，在功能和樣式上做一個(gè)較好的中和
這種有擴(kuò)展樣式的券里覆，大多出現(xiàn)在券類型眾多的情況下。擴(kuò)展樣式能為不同類型券保留一個(gè)可設(shè)計(jì)的出口缆瓣，有一定的緩沖作用
4.卡券排版
整個(gè)卡券中喧枷，最重要的是排版，好的排版能把信息有效地傳遞給用戶弓坞；從重要性上來說隧甚，排版樣式 > 視覺樣式
由于本次設(shè)計(jì)主要以非中文設(shè)計(jì)，所以更多的涉及到的是西文排版的心得
整個(gè)設(shè)計(jì)過程中渡冻，主要涉及到的排版問題有如下：
字號關(guān)系戚扳，字體大小寫，字段對齊依據(jù)族吻，分割線使用帽借，Tag設(shè)計(jì)
a1.字號字重
對券的信息層級了解后，通過字號的大小變化是區(qū)分層級的基礎(chǔ)方法超歌；
但在字號種類的使用上要克制砍艾，同類信息使用一種字號，每出現(xiàn)一種新的字號都代表著一種新的層級巍举，字號數(shù)量3-4個(gè)為宜
在字重的使用上脆荷，要更加克制，一定是要絕對突出或弱化的部分才加入字重懊悯，為信息層級做細(xì)節(jié)上的平衡简烘，字重一般1-2個(gè)為宜，可以不使用
a2.字體大小寫
在設(shè)計(jì)時(shí)會發(fā)現(xiàn)定枷，全大寫的字段和大小寫組合的字段，在同樣字號一致的前提下届氢，觀感上前者比后者要更大欠窒。所以在設(shè)計(jì)時(shí)，如果沒注意會導(dǎo)致對齊問題；同時(shí)要了解每個(gè)字段大小寫使用情況岖妄，因?yàn)橛行┳侄稳髮懣梢孕徒械淖侄蝿t不行
Tips：全大寫的字段在觀感上會更規(guī)整，對齊依據(jù)上會更好找荐虐，也更美觀
a3.對齊依據(jù)
以前做設(shè)計(jì)時(shí)七兜，主要以一個(gè)個(gè)整體的模塊作為對齊依據(jù)。但對齊的模塊并全然一致福扬，所以往往在對齊時(shí)會出現(xiàn)畫面不平衡的情況腕铸，居中對齊時(shí)遇到這樣的問題尤其多。 對于這樣情況铛碑，改變對齊依據(jù)參照能較好的解決這個(gè)問題狠裹。把對齊的元素由模塊降低至元素，對齊的方式可以從單一的居中對齊汽烦，擴(kuò)大為頂對齊或底對齊涛菠，參照方法和對齊方式的擴(kuò)展，能給畫面帶來更多的可能性
?a4.分割線使用
在整個(gè)卡券樣式中撇吞，分割線的主要作用并非裝飾俗冻，而是在用適當(dāng)時(shí)候用來區(qū)隔信息層級的手段。一般來說牍颈，界面上區(qū)隔層級的手法可以用留白和分割線兩種迄薄；但一般在使用頻率上來說，留白區(qū)隔>分割線區(qū)隔颂砸，分割線的使用克制噪奄。
a5.Tag設(shè)計(jì)
在卡券設(shè)計(jì)中，需要一些Tag來濃縮表達(dá)一些意思人乓。在設(shè)計(jì)時(shí)勤篮，這些Tag最好能保持一致的設(shè)計(jì)語言，因?yàn)門ag樣式太多色罚，會導(dǎo)致用戶的的困惑碰缔，對每次新加入的Tag樣式，都要去判斷是否有必要新增戳护。另外金抡，Tag會根據(jù)位置的不同在作用上發(fā)生變化，一般來說角標(biāo)位置用來表達(dá)時(shí)間和選中狀態(tài)腌且，位于標(biāo)題或描述字段的Tag是對劵屬性的解釋
5.適配要點(diǎn)
a1.字?jǐn)?shù)邊際
卡券描述字段字?jǐn)?shù)不能確定是最常見的問題梗肝，是設(shè)計(jì)中最無法控制的因素。所以為了避免一系列的問題铺董，在設(shè)計(jì)上要對字段字?jǐn)?shù)進(jìn)行控制巫击，盡可能把文案變成標(biāo)準(zhǔn)文案或確定顯示規(guī)則。這樣在后期維護(hù)和版本迭代中找到依據(jù)，避免在開發(fā)中出現(xiàn)各種問題
a2.國際化
因?yàn)橹形氖欠綁K文字坝锰，字段長度可控粹懒，西文字段長度不可控情況較多，同樣的意思中文比西文要短很多顷级。在解決辦法上凫乖，除了找到貼切的當(dāng)?shù)卣Z言表達(dá)意思外，大部分情況下弓颈，需要對部分設(shè)計(jì)樣式進(jìn)行調(diào)整帽芽，比如Tag樣式并不適合加入過長的字段，需要照的合適的方案做替代
a3.樣式調(diào)整
對于多語言的設(shè)計(jì)恨豁，理想情況是為每種語言做對應(yīng)設(shè)計(jì)嚣镜。但考慮到現(xiàn)在的情況，一套設(shè)計(jì)可能要適配各種文案字段橘蜜，所以在樣式上就要進(jìn)行一定的調(diào)整菊匿。比如字號根據(jù)位數(shù)進(jìn)行變化，折行顯示计福，超出部分“...”跌捆，都是一些常見的手段。所以這就尤其考驗(yàn)對邊際情況的掌握象颖，對于較大的項(xiàng)目佩厚，一定要介入翻譯表格機(jī)制，讓對應(yīng)語言的翻譯有依據(jù)说订，有沉淀抄瓦，保證設(shè)計(jì)適配的同步
