構建設計師和程序員的共同語言

2019-2-24 分享達人 cs界麵設計文章及欣賞

從控件封裝|-许喵喵mickey种子、布局說明---廊坊大学城吧、標注語言三個方麵_|_跟骨消痛贴,指導設計協同開發--永盛是什么软件,共同建立項目框架和控件庫-诺基亚7070拆机教程,規範設計方式和開發方式---注册趣推安全吗。

undefined


設計師拿到開發剛寫好的頁麵時|_无叶涡轮增压器,往往會眉頭一皺--_银泰店庆时间,這跟自己的設計稿差別有點大啊|--长号查短号。在設計走查的時候才發現|二重重装,幾乎每個頁麵都有大大小小的問題__新款途观报价及图片。從顏色樣式到按鈕組件|--乐峰团购、從元素尺寸到界麵布局__-锦州社区,都多多少少存在偏差-茶黄蓟马。開發一般情況都是在完成功能開發後--凤舞摩天麦词,才對頁麵視覺進行統一優化|||中国最大的七星彩加急版交换论坛,但是無奈需要優化的地方太多太分散|穿越之混元剑圣,成倍地增加了工作量_168娱乐2。


那麼能否製定一套協作方案-_|镇江老兵被打事件,把固定的__|奇乐影院、通用的和可複用的元素或組件封裝起來_单位性质有哪些,運用在項目初期設計和開發的工作流程中_|_注册送18元彩票。從而統一地把控設計項目中的所有可變元素_||中成快递,方便設計師和開發在項目中後期做各種改動-_芝兰粉,同時也利於項目的迭代升級呢--单身公主相亲记优酷?


這裏我做了以下思考_-台湾最新消息,歡迎大家一起來交流探討|_-偃师户外。



/目錄

一_卡通战争剑灵中文破解版、寫在前麵

二_-唐海二手房出售、控件封裝

三||_宫锁珠帘定妆照、布局規範

四__-永胜讨债2000会上门吗、標注語言

五_-北交大晨光bt、總結



一||_奄美彩加、寫在前麵

UI設計要有組件化--易赢在线官网、模塊化|_|祛疤整形医院、結構化的思維-__金华艾克医院孙尚见。以各平台設計規範為基礎|_衡水电大成绩查询,從控件封裝|_柳焚余、布局規範和標注語言三個方麵_|-聊斋奇女子之小谢,構建一套設計師和開發之間的共同語言||雷波电脑。



/文字&文本


在封裝前我們先定義一下設計中最常用到的元素——文字||_jy鞋子淘宝店。文字在UI界麵中幾乎撐起了絕大部分內容_-|永盛国际平台可靠吗,它的功能包括但不限於標題導航-三百年女尸复活、內容構建|__和绳媲美、說明解釋|-|大旱之年、標簽示意等等-||众赢国际官网下载。把文字跟圖標_-菲诗曼尔、背景等元素組合起來的時候__-雷霆咆哮打野出装,在界麵中形成了更明確的意符-_朱云来的妻子。


(一)換行規則

文字在界麵中的顯示方式可分為標簽|东北二嫂水仙车震ed2k、短文本-|优乐彩彩票官网、長文本三種_-对开纸尺寸。標簽和短文本一般情況下不換行顯示__-读书郎f20、如在特殊情況下會超過一行-_双升单机版,則使用省略號顯示--_五菱双排加长小货车。長文本特指會換行顯示的文本|-快男微电影。




(二)行高設定

各係統平台都有自己默認的字體行高規則-|御泥坊创始人36岁猝死,但是這些行高規則並不統一|_|银河娱乐提现不到账,比如iOS的字體行高對照表如下_易富娱乐彩票app:

來源見水印


而且默認的行高在展示長文本(多行顯示)時|_36选7走势图开奖结果,效果並不一定理想_|198彩平台正规吗,甚至可能會很醜陋_-众博彩票网址导航。所以我們需要製定統一的標準來規範各平台的字體設計和開發規則_--霍林河政府网。


解決方案-_长盛井管:對於標簽和短文本默認設定1倍行高||_骄阳似我 19楼,長文本根據文本內容和字號大小來設定行高_-南京水货手机市场,以達到最佳閱讀效果-|云顶娱乐是不是真的吗。

undefined

行高設定



(三)視覺間距

規範短文本行高--|1699彩票,確保視覺間距等於實際標注間距|_长治市教育局网,才能保證開發準確還原界麵布局|-178国际娱乐12。

undefined

視覺間距示意圖




/特殊情況

有些控件的文本長度在少數特殊情況下會換行顯示_|丰县王沟中学,為了簡化適配過程-|nokia6120c软件下载,我們可以直接使用長文本來設計||_亿彩是正规平台吗。

(一)Toast



(二)橫幅





/圖標&切圖


圖標在某些場景下可以無需文字說明|易购彩票安全不安全,更直觀簡潔地表達含義-|_性价比最高的笔记本电脑。設計同一類圖標時應該保持視覺效果統一--闻一多先生的事迹,視覺尺寸可以通過使用模板來進行規範---234彩票信誉怎么样。

undefined

圖標設計模版



為了保證同一組圖標的影響範圍相同_|黑道王子与冰山公主,我們在設計圖標時首先設定視覺安全區域-钢笔行书字帖欣赏,然後加入透明度為1%的背景作為影響範圍圖層_-360购彩大厅双色球杀号。切圖時需把影響範圍圖層包含進去||-开封广播电视台,不僅便於設計師規範所有圖標的尺寸大小__078彩票中奖可以提现吗,也方便開發直觀獲取到圖標的實際切圖大小-_重庆历任公安局长。


圖標設計示例




二_|西安洗浴全套、控件封裝

利用組件化的思維-_长治城区教育信息网,將可重複利用的元素或者控件打包成固定的模版||永胜国际买彩票,稱之為封裝--1号平台怎么样。

這裏設計師可以使用Sketch的文字_|花为谁开、圖層-6个男人要过河、組件封裝功能-__集安市政府公众信息网,構建可協作||睿云网成绩查询 登录、方便維護-哪有那样的网站、完整的控件庫-非洲色图。程序員在構建項目框架時|__360彩票导航,也應對每一個元素進行可複用性封裝_||鲅鱼圈观澜天下。


(一)封裝基礎顏色

基礎顏色有主色|-|经典色文、輔色---杨幂被非礼的图片、強調色|-青岛62中、中性色(灰色)_--阚立文 我愿意、功能色(成功_|上海蹦极多少钱、失敗|_-割让台湾、警告|-_金沙江路怒江路、不可點)等__李白谈爱。


在sketch中|-36选7好彩3奖金是多少,新建一個圖層_|_金川公司吧,設定好圖層樣式|_lame exe下载,點擊新建圖層樣式完成封裝|-_沈阳男性病建国医院。封裝樣式按固定格式“類別/編號+顏色”來命名-|众彩彩票导师,其中“/”可以自動識別為列表層級|_仙剑5破解吧。

顏色封裝




(二)封裝常用字體

每個項目都應該設定常用字體庫_--博医堂保元汤,例__永盛彩票开奖网站:導航標題__-艺术照 明伟、文章標題_-优信彩票快3、正文_-qq2011版下载、說明--银行建筑、鏈接等等||美国乒乓球队。


在sketch中-网点支付,新建一個文本-||波多野结衣13全集无码,設定好文本樣式_|亿彩彩票代理,點擊新建文本樣式完成封裝|||234彩票登录。封裝樣式按固定格式“主類別/二級類別/顏色”來命名--运盛彩票登录,其中“/”可以自動識別為列表層級_世纪星影院。


字體封裝



(三)封裝圖標

APP項目中的圖標大小一般設定為20px|_22彩票是黑平台吗、24px||_头顶锅盖身披麻袋、28px---2019年彩票五行、32px-_酷派w706软件下载、44px等|_|注册送分本金的棋牌。


在sketch中||365彩票首页,新建圖標影響範圍圖層|__俗人岛华人社区,設定安全區域-|106官网彩票电话,畫好圖標後點擊新建symbol按鈕-|什么车性价比最高。封裝的圖標按固定格式“範圍/具體位置/名稱”來命名---掌上永辉下载,其中“/”可以自動識別為列表層級--_虚空龙声望开启。


圖標封裝



(四)封裝按鈕

按鈕一般情況下有兩種適配方案支付宝元宵理财,第一種固定邊距-_狼行天下三轮车,第二種固定尺寸_01彩票APp是不是正规的。封裝時結合Dynamic Button 3.5插件_掌信彩客服电话,可以動態製作同類型按鈕--008彩票论坛II。


在sketch中_|2010男篮世锦赛决赛,利用已封裝好的字體和顏色來組合成按鈕的文本和背景_|陕西二套都市快报,文本命名格式為“上邊距||-德甲历届冠军:右邊距_|至尊彩app是正规的吗:下邊距_-|欧邦鼠:左邊距”-_赢彩彩票,如果上下和左右邊距並分別相同--娱乐天地点检怎么挣钱,則隻需要給出上邊距和右邊距的數值|-160彩票平台。如“10:20”__英国女主播直播中脱胸衣露乳出镜。按鈕背景命名為BG_|众购彩票开户,設定為已封裝的顏色_郑州长通物流电话。執行一次“⌘+J”的操作||_致青春 台词,關聯文字和背景__|智采app,然後將兩者用symbol封裝|-助赢计划官网。


封裝後取消Dynamic group編組




由於按鈕大小會根據內容文字長度而改變_||注册送彩金彩票cp,因此需設定合理的適配規則_-申通快递详单查询。


固定文本左上邊距和高度



固定背景的高度



(五)統一維護

基礎元素樣式可以放在一個畫布上進行統一管理_|济南五中。

undefined

顏色和字體可以統一管理





三|北京甘露寺、布局規範

利用模塊化思維進行布局_遂宁英语网,將由已封裝的組件構成的功能區編組成一個模塊_永利娱乐最低充多少,模塊可以自由排列組合|-|168彩票网站正规吗,增加或刪除-_青岛二胎新政策2014。


(一)基本框架

界麵布局應遵循各平台基礎設計規範_-镇江警官学校,iOS和安卓的基本框架不能混用-_038彩票提款被拒绝。

undefined

安卓&iOS對比圖



/開發規範

製作高保真設計稿時我們統一使用iOS設備的750*1334分辨率|-3208c软件,對應Android的720*1280分辨率|众发彩票是违法网站吗。無需新出一套設計稿_||坏蛋是炼成的2。


iOS和Android設備在設計和開發時應該注意的差異_-车位尺寸,基於1倍標注

/視覺上

a. iOS狀態欄20pt|_铁打一只船,Android狀態欄25pd

b. iOS導航欄44pt亿发彩票是诈骗平台吗,Android導航欄48pd

c. iOS菜單欄49pt|_|功夫小帅,Android菜單欄48pd


/交互上

a.  Andriod有物理返回按鈕||挡板砖,點擊控製返回上一步操作-_01彩票网页,而不僅僅返回上一個頁麵_|2011qq官方下载安装;iOS沒有實體返回按鈕-_-耳鸣466专家,導航欄的back按鈕控製返回應用內的上一層頁麵||大显mt888。因此在設計時每個頁麵都應該有明確的返回或關閉按鈕

b. 導航標題的位置iOS居中顯示__中央一台直播播放,Android靠左

c. 安卓對列表操作欄的處理為長按||-摩托坊出售区,iOS為左滑_-尊龙娱乐人现金。實際處理的時候可以分開設計_-安溪野山谷,也可以設計成統一的操作方式



(三)模塊化布局

模塊化布局對於設計師來說可以使頁麵功能和信息分布清晰明了|_|www xm12333 com,對於開發來說也更利於進行頁麵布局_东莞桑拿服务流程。


undefined

例一_七里香 泷泽萝拉:主界麵


undefined

例二|鲤鱼山火山爆发时间:內容頁





四-_丝诺萄官网、標注語言

利用sketch插件導出可自助查看標注的html文件|-108娱乐怎样下载,標注文件無需手動生成-勇者斗恶龙怪兽篇joker2金手指,也不會對設計稿造成遮擋||2019年四不像欲钱料。但是開發要花更多精力去對每一個元素的樣式-|金亚拉克的末日、間距進行點擊查看-|众博彩票app下载,相比之前直觀的標注_|-优博仿生配方奶粉段,增加了閱讀成本-1288彩票怎么样。


為此我們設計一套標注方案|_|重庆历任书记,可以通過少量標注_|_请你和我结婚,提供準確的多界麵適配信息__cad2014序列号和密钥。標注規則是對由適配不同屏幕造成歧義的地方做針對性地標注說明---方程计算器。


(一)固定框架

在設計界麵時|--国家副主席有几个,首先設定界麵的固定框架結構|_众益彩票中国彩,如頁麵內容區的安全邊距_角马网。


undefined

全局界麵安全邊距設定


/模塊外間距設定

多個模塊之間的間距設定

undefined

模塊間距設定||6月新股,一般情況下可以不做標注



/模塊內安全區域

模塊內部組件和元素的影響範圍

undefined

模塊內安全區域標注




(二)基本標注類型

規範好界麵的布局和模塊的構建方式後-|-苏州园区湖东地图,針對模塊或者組件在適配過程中會變動的部分-|诺基亚n97mini软件,或者固定不變的部分-|冰恋小龙女,特別標注說明|_-众赢彩票网址。其餘沒特別標注的部分按照默認標注尺寸來布局||亿博登录。


/固定高

undefined

固定區域高度



/固定寬

固定彈出框寬度



/固定百分比

固定圖形所占頁麵的百分比



/固定邊距

固定邊距


/固定比例(Fixed Ratio)

undefined

固定模塊寬高比



/等分分布

undefined

等分分布


/範圍內居中

undefined

在標識的範圍內居中分布





(三)標注實例

因此方案尚未落實到實際項目中_|盐都网,因此在這裏以網易雲音樂為例-自动烹饪锅 林志鹏,按新的標注方案進行剖析說明||吸吸瘦。


例一




例二



undefined

例三



例四




五_|2元中国福利彩票怎么买、總結

文章內容更多偏向指導設計師如何規範設計方法-|-106官方彩票com,同時創造了幾種標注語言(FR|-麟游吧、ED_|和龙市政务信息网、AC等)|钛卷板。後期組織設計和開發同學一起就此方案進行交流討論-_四年级自然景观作文,給大家普及這種設計和標注方法_-|节日花篮,讓設計師和開發能夠就組件封裝和標注語言的方案達成共識_|-英皇国际版本363,方便後期協作__淘宝画报,提高工作效率-|-111彩票。同時聽取多方觀點|_|2019最新捕鱼游戏排行,對此文檔進行不斷優化完善_|中央6。

標簽: 構建設計師和程序員的共同語言

分享到_-_新娘无悔的爱第二部: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap