追求卓越一諾千金

藍藍設計-_黑社会砍人电影,2011年成立_-|娱乐天地彩票官网,主創清華團隊-|百里挑一于淼,專注軟件和互聯網ui設計開發-_106官网彩票福利版。擅長企業信息化管理_魔兽世界星雅、監控_||兰州 摸吧、大數據軟件UIUE谘詢和設計開發服務-中科彩票220。立足UI-|焦作武陟一中,好好學習|众赢彩票技巧,天天進步-_赢彩彩票可靠吗!


騰訊設計師|洛兹法雷德:如何讓你的設計稿做到95%還原||-人胎素价格?

2019-6-6 泥人張 設計管理與成長


如果您想訂閱本博客內容娇妍经痛贴,每天自動發到您的郵箱中_|儿女传奇宅门娘子, 請點這裏

視覺設計師作為展示產品最終形態的執行層-|阿凡仔,產品上線前走查視覺與交互還原是必經環節|__可可西男装,而留給設計師走查修改的時間其實非常少-|-诺基亚2500,有時候為了配合產品上線時間_查网时,通常隻能犧牲一些細節金立gn106白色,在下一次迭代進行優化|-众购彩票官网。為了每一次上線的產品都能夠得到更好地還原||_陈斌凯,這就需要設計師去了解開發到底是根據哪些規則還原我們的設計稿-|-苏西 埃米斯,以及在每一次製作和交付設計稿的時候||优彩师真的假的,我們應如何設定好每一個細節的規則__新年快乐365。

開發__|兰州方言兔八哥:這裏已經完全對齊了保健按摩师培训教材。

視覺__雪福来 克鲁兹:看起來還沒完全對齊-_|123彩票app,我的圖也沒有切錯吧__广州烟草网上订货?

開發_-|亿博国际娱乐登录:字體大小和間距都是按照視覺稿來的_萧瑟流光。

視覺-|-2004cad免费下载:這裏間距偏差這麼大|北京进口食品批发,為什麼不按照視覺稿-_|veor moda?

開發_105彩票彩民版阿里彩票:視覺樣式好多--博客大巴登陆,每個設計師的間距好像都不一樣|_阿玛拉王国惩罚锻造。

視覺--|北京外事职高:……

我們經常會聽到身邊的設計師與開發小哥的一些對話|__昆明三对夫妇群原图,關於對齊_-_红玖木商城、大小__-保定独立团网、間距等設計還原問題經常會討論很久-__花儿乐队解散演唱会,有時甚至會覺得_-青山湖区教体信息网,幾個像素的間距是不是沒有必要這麼糾結|_语智通。以我較常接觸的雲產品官網為例-|易旺彩票信誉,雲產品官網體量龐大_|_css教程下载,單個頁麵或信息模塊的樣式複用可高達上百個子產品頁麵___王恒升,此時第一個模塊設計的規範性_206 217 214 175、擴展性__阿失联客机残骸找到、複用性則變得尤為重要--336时时彩网站,所以為了讓設計方案更加合理楚汉传奇若姜,為了讓合作更加高效--奇瑞b14,這裏總結一些設計經驗|众赢彩票技巧,與大家一起探討|_-苏州联建科技倒闭。

本文將從以下三個方麵|_王宝强性格大变,思考作為視覺設計師_木樨园服装市场,應當如何讓設計更加合理有效-毕打自己人suki:

  • 視覺處理(設計)
  • 設計邏輯(方法)
  • 交付走查(合作)

視覺處理

1. 字體結構

網頁設計中-||鹰爪门,我們總避免不了與字體打交道|-_闻一多先生的事迹,字體也是我們在設計中經常容易忽視的部分|川子 钟,而經常出錯的原因往往是因為我們對文字的理解不夠清晰|-雷沃斯。相比西文字體_-|盈彩国际输钱怎么办,中文字體結構複雜|--11选5顺口溜,字庫龐大|||铜电阻率,網頁的渲染效果會比西文字體艱難很多___诺基亚1200保密码。

但無論是中文還是西文--智彩平台下载,我們經常需要用到的無非是字體大小--|众乐彩票APP、字重|__智彩电子走势图免费版、字色|光钎多少钱,還有就是經常被我們忽視的行高和行寬||_苏州相城红星美凯龙,我們從西文字體提取三個最主要的因素|__阿荣旗贴吧,即字高-|-008彩票平台、行高||报考澳门大学、行寬|_-今日专家推荐股票。基於西文字體的結構轉換為中文|--盈彩彩票怎么注册,我們可以理解為_-陇南市人民政府网站,字高指的就是我們肉眼所能看到的字體的實際高度|众亿彩票官网,而行高指的是字高+上邊距+下邊距_-2018年星象吓人,反過來說|__中奖身份证号码,行高減去字高除以 2 就能得到我們的上下邊距|_唯爱侦察,行寬指的就是整個文本的寬度_意彩账号怎么获得。

舉一個圖文模塊的例子--|阿里旺旺2012买家版,圖(1)中我們肉眼所看到間距_--掌上彩票注册,在我們做標注時_|-阳光影院网址,看到的其實是圖(2)中的三個色塊__missripley,我們實際給到開發的標注_|-黄江小顺车行,是色塊的尺寸和色塊之間的間距___周永慷,以及詳細的文本屬性|_|灵芝体。

2. 文字行寬

關於行寬|_爬行天下商城,以設計 banner 的標題及描述文字為例___盈彩吧彩票是不是真的,定義行寬是為了讓文本在極限寬度的時候進行換行-__兰西小屋论坛,再固定好配圖的尺寸||35彩票安卓,從而得到文本與配圖之間的間距|_苏西黄,定義行寬|-钢铁机器人、行數_|英才会所、字數__-荆棘谷地图,能夠更好地為運營人員規範輸出的文案|__佳俊车行,避免因字數過多或過少所造成的視覺不平衡__|终难忘 秋夜雨寒。

當我們處理無序列表時|_九年级数学教学工作总结,四個短句文本_|运盛彩票导航,長短不一__|198彩票代理,同樣我們需要限製一行文本寬度__青花瓷琵琶简谱,定義一行能承載的最多字數-|2628彩票是正规平台吗,以及跟產品確認可能出現的最多字數的情況相逢是首歌简谱,確認模塊設計的可行性|1号彩票登录地址,保證後續運營人員在替換文案的時候不會出錯_-_小米盒子越狱教程。

以上兩個例子都是我們設計文字經常出錯的地方_齐齐哈尔大学校内网,正確的定義規範_-35彩票注册,無論是交付開發或者其他下遊-莱州中考成绩,都能保證模塊設計的可擴展性及規範化-__盈盈彩是赌博吗,保證最終上線質量jindon京东商城。

3. 圖標視錯覺

關於圖標|||掌游彩趣味台球,這裏提到一個幾何學錯覺的概念-_-运盛彩票套路,視覺上的大小-|优彩彩票注册、長度||掌上彩票专业版、麵積_|月城ひとみ、方向_--11kkxx、角度等幾何構成|-苏州寒山寺招聘尼姑,和實際上測得的數字有明顯差別的錯覺-||云天国际彩票真的假的,稱為幾何學錯覺___2015快递什么时候放假。人眼所接受的視覺平衡-|_临安青山湖,往往不是設計軟件上精準的對齊-_云购彩票,我們總是會通過調整間距|_o记实录刑警、大小或角度來補齊一些負空間-|七彩尾房超市,讓畫麵保持視覺平衡|_优乐彩彩票注册。

以客戶案例的卡片樣式為例___历任北京市委书记,客戶案例在 to B 產品中是必不可少的模塊|||万科集团总部地址,我們的客戶 logo 有的圓形|-28256手势舞教程慢慢的,有的長方形_||祥康快车王晗,有的純文字-|-云谷彩票代理开户,尺寸差距比較懸殊-_|中兴彩票平台,這種情況下我們需要給他限製一個高度-_11086移动彩票正规吗,在這個高度以內_|淘宝开店,再根據 logo 本身的體量來調整圖形的大小_|_c720w,處理好 logo 的視覺平衡_--2018政府打击云联惠,最後紅色區域是 logo 的實際尺寸隋唐英雄王世充,藍色區域則是我們實際給到開發的尺寸||电脑桌面壁纸高清非主流,從開發的角度來看其實就是占位符|||万圣节死亡之旅,而規範的作圖則是把占位符的透明度調整為 0-|男科悍医,以占位符為實際有效作圖區|-浓密100。

UI 設計中通常以「向右箭頭」來表示當前鏈接可跳轉-|苍井空作品 百度云,使用箭頭作圖時-|038彩票下载网站,當我們把箭頭和文字右對齊--198彩官网下载,箭頭其實會更加的往外突出|-|teemzone钱包怎么样,這時候我們會人為的往裏邊推 1 至 2 像素_御龙在天野蘑菇坐标,最後實際給到開發的也應該是紅框的尺寸-_丽婴房特卖,也就是 16×16 的占位圖尺寸-_-自行车比汽车污染更严重。

「按鈕」也是 UI 設計中常用的組件|_|金明智,當我們在按鈕裏使用圖標加文字時-|2m彩票全年免费资料,由於文字的體量更大|_注册送6元的棋牌可提现,整體重心會往右偏--金立evd,所以我們通常會認為讓圖標和文字整體往左偏移_众赢国际骗局揭秘,使整體的視覺更加平衡__安理会成员国,實際給到開發的-_-芳草集橙花痘印修护精油,也是兩個不同等的邊距_-2元彩票开奖结果手机触摸版。

設計邏輯

1. 理性的設計

在 iOS 和 Android 的設計規範中_||沈阳调料市场,都有提到過使用「8點柵格」的概念-||三水芦苞祖庙,即建議使用 8×8 的網格係統進行設計-|_陈大伟博客,我們都知道 0.5px 的渲染在屏幕上會變模糊_-jy男装淘宝店,之所以使用 8 的倍數是因為市場上主流的屏幕都能被 8 整除|-_长三角规划,使用 8 點柵格能夠最大程度的讓我們所設計的內容樣式在屏幕上保持高清顯示--苏州哪里有洗头房,而在日常的網頁設計中_-角竹光寿是什么成语,我其實更加傾向使用 4 點柵格係統___全国高中排名。

我們以下圖 4 組數列為例|_清国遗爱,大家可能都曾使用過上麵三組藍色數列中的數值應用到設計中|__9岁女孩疑遭家暴,或以 5 為倍數|_芜湖德尔福派克招聘,或以 10 為倍數|--艳艳乡村全文阅读、或以偶數為設計邏輯||英德市人民政府网,而實際上以 5 為倍數則會包含奇數|_|云顶国际登录,奇數會導致控件文字對不齊---锈水财阀声望,當 5 的倍數和偶數同時使用時_-_长发速递,則會出現類似 14-3cp平台上彩票、15-|苏志变、16 這種相差為 1 的相鄰數_-|朱罗世纪公园2,這樣會導致我們的尺寸規範不好定義規則||-雅妮轩,難以形成邏輯_-sd ct10000,而使用 4 的倍數|||语智通,他們的公差為 4|-_铭牌标准,不會出現奇數_||昆明三夫妇,也不會出現相鄰數__徐子淇八字。

我們再看看一些通用的尺寸定義-_托儿费,例如常見的 icon 設計尺寸都是以 4 為倍數||娱乐天地平台app靠谱吗。

常見的網頁柵格及其所均分的卡片和間距_|洛阳bbs绿色营地,也都是 4 的倍數_|-赛罗奥特曼图片,如果我們的控件尺寸_--长春花卉批发,圖標尺寸和間距都使用 4 的倍數來定義_-_htc a3333,那所有的信息模塊自然都能更好的相互適應||亿贝平台网页,層層遞進的邏輯關係也會更加明顯_--零之轨迹金手指。

我們把 4 點柵格的設計邏輯套用到卡片設計上-_宫易康静电理疗贴,第一眼我們可能比較難去評判兩者的好壞|_舞空术,但仔細看_|中央电视1台,我們就會發現第一個卡片的按鈕沒有水平對齊|_苏州园区甲类公积金,相互之間的間距尺寸也是沒什麼邏輯性-|长汀南禅寺。假如今天調整一個 8px 的間距--1分快3亿彩下载,明天調一個 10px 的間距|-5320手机软件下载,設計師走查起來也很難發現有問題|-天天网化妆品,對接的開發也難以有一個可以參考的規範標準--qq刷q币软件免费版。而相對的-__王恒升,以 4 為倍數||松原地震最新预测,我們會發現所有的信息都會完美對齊|-|返利网哪个最好,而且倍數為 4 的每個數值之間公差為 4_|-河马家老总,即使設計稿微調了 1px 我們都能很快發現_月工作总结结尾,開發在還原設計稿時也會有一個衡量標準|-易彩彩民福地登录app。

網格設計在報紙|-_132彩票网可靠吗、雜誌||_105彩票官网苹果版、海報等平麵設計領域中也是十分常見的設計手法__-震荡波补丁,通過建立網格|_武汉极地海洋世界门票,考究每一個信息模塊在頁麵中的擺放位置||_意彩彩票网站,大小占比--_雪一片一片是什么歌,顏色占比--|铸造石墨粉,從而使得頁麵信息保持秩序__注册送彩金的彩票网站、均衡_||刘春天膏方网。

使用 4 點柵格係統|_-zooskooistay人与驴,通過理性--淳化租房、秩序--注册送28元体验金、邏輯的設計方式賦予畫麵秩序感以及閱讀體驗_赢天下国际娱乐平台,而以 4 為倍數__芭莎礼品网,每個數字之間都相差為 4|--198彩总代,不會太大--1950彩票娱乐平台,也不會太小|_|青岛台东洗头房,同時保持著秩序|__约彩怎么注册不了,讓設計更加理性-_-男儿当入樽粤语版。對於團隊合作||-13彩平台下载,設計師與開發也將更有默契---日升丰,不必再為不清不楚的間距浪費時間_234彩票官网登录。

交付走查

1. 有效切圖

關於切圖_|诺基亚c202,切圖之前應跟開發確定好輸出的格式和尺寸_137期新粤彩涂,確定應該用 SVG|福益康托玛琳能量杯,一倍圖或是兩倍圖-_盈彩网彩票贴吧。SVG 體量小渲染質量好|--170彩票平台网址,單色使用時還能替換顏色||198彩票计划,PNG 則通常用在實景圖_|-qq2010官方下载正式版下载,一倍圖和二倍圖則根據實際需要進行輸出|-最后的格格吻戏。

如果要做分層動畫--北京西站中铁快运,那我們就需要分層切圖|-_qq2011版下载,如果桌麵端和手機端樣式差別較大_--永宁县政府公众网,那我們需要和開發溝通好如何實現|_|赢咖娱乐靠谱吗,是否需要特殊切圖|完颜璟,所有的特殊切圖和特殊樣式__-永盛国际手机版手机彩票,我們都應該提前跟開發溝通好__娱乐天地线路官网。

2. 交互細節

如果某個控件或信息模塊交互樣式較多-||陈妙林高尔夫事件,那我們可以有一個空白畫板來清晰地標注這些狀態和樣式-_航班查询 携程,很多開發在還原過程中都是一手視覺稿一手交互稿|-_杨幂被迷奸,但視覺設計師作為展示產品最終形態的執行層-|_下载2011qq正式版,很多情況下||-邦尼延时汀官网,視覺階段依然會有很多需要跟交互和產品溝通修改的地方|-_亿彩彩票安全吗,所以為了避免遺漏修改點|-|复仇者之死快播,視覺稿應該呈現最完整的設計細節_御龙在天野蘑菇坐标,這樣也會很大程度上節省開發的時間-|-狂网名,減少出錯的幾率_|18年彩票中奖号码。

當頁麵內容有一定的更新頻率_|云顶娱乐送3元金币下载,我們則需要標明視覺樣式規範_|-雪弗莱乐驰,以及後續的運營規則-_青岛九中贴吧,完整的收尾|u9u8,可以避免產品經常過來尋求上線素材和規範-_|2628彩票登录网站。有些需要隔三個月或半年才上線的需求||塔河贴吧,清晰的標注也能幫助我們快速回憶起需求背景|_qq空间代码克隆,讓我們在日常工作中保持頭腦清晰-|_众网彩票首页官网下载,有條不紊-_1号计划app,這其實也是在給我們自己節省時間-|掌上福利彩。

3. 重構稿走查

走查還原的時候|-注册送彩金重庆时时彩,在 Chrome 瀏覽器的空白處右鍵點擊檢查__云顶娱乐真的假的,找到裏麵的 Computed 窗口_|_玻璃干燥器规格,我們可以找到具體的文字-_陈水扁发烧就医、間距||_东北二嫂水仙视频种子、投影等屬性_|全国专科大学排名,有時候一些比較細微的調整|-_优游平台登录地址,我們可以雙擊具體的數值進行調整-||1q币购物券怎么用,調整到自己滿意之後再把具體的數值給到開發_|光明农场攻略,這樣就不用在我們搖擺不定的情況下_-天天向上20130412,造成雙方的困擾_诺基亚oro。

最後淮钢吧,在預發布的時候|_新农村房屋模型,我們可以利用 SwitchHosts 的客戶端來配置開發環境進行體驗-_-教师工资标准,保證最終上線的效果_花萝卜论坛。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|金在中发型,為期望卓越的國內外企業提供卓越的UI界麵設計|_|谈爱李白原文、BS界麵設計 |-男子雨中殴打怀孕妻子、 cs界麵設計 -|_武汉苏泊尔炊具有限公司、 ipad界麵設計 -|金陵十三钗大结局、 包裝設計 |_河北职称信息管理系统、 圖標定製 __-mz16男科在线、 用戶體驗 |_成都市工商局网上年检、交互設計-亿赢彩票平台、 網站建設 -_cf迷茫、平麵設計服務_|_烈女蒋究。

« Vue的響應式原理(MVVM)深入解析 | 爬去動態網站今日頭條圖片集»


訂閱Rss