設計語言 – 按鈕 (button)

2019-2-14 用心設計 設計理念

如果您想訂閱本博客內容|船讯网船位查询,每天自動發到您的郵箱中__-诛仙漫画下载, 請點這裏

 

一個簡單的按鈕需要經曆無數次推敲_|姿姿堂,才能整合為設計語言||-可牛361特警。今天主講設計語言中的基礎部分__娱乐天地平台苹果app,組件部分的其中一個部分-按鈕---01彩票网苹果手机版。設計語言從結構上分為_颈立康:基礎部分||_1千本金每天赢100就收、規則規範部分和業務部分__亿博登录,後麵我也會把其它部分補全_|-群芳录。

基礎部分的畫布大小是250000×56000-_234彩票网络平台合法吗,共47個組件部分-金饶;規格規範部分就很龐大了(工業設計_--亿彩彩票北京pk10规律、交互設計-河北区haobc、平麵設計-|-乔洋演唱会、設計心理學等)_五星体育f1;業務部分是按係列來分的芦荟棉是什么面料,有主次之分--有比我更帅的人,目前隻分了兩個係列(N和S)__腾讯客服首页,N係列對應基礎組塊_|青岛华臣影院,S係列對應嵌套定製組塊_7kk7小游戏。我把一個係列的主係列稱為主版|--钱塘老娘舅2013,把子係列稱為子版|-优点彩票能赚钱吗。N係列的一個子版大概有50個頁麵--|22福利彩票官方ios软件,每個頁麵又包含三種樣式-_106福利版彩票正规吗?,每個係列中大概有20個子係列|_日记400。工程量很大|_金螳螂朱兴良,大致算了一下-_-吉利心水论坛,要做完兩個大係列(N和S)需要做|--殷世航一个月赚多少钱:50(頁麵)x3(樣式)x20(係列數)x2(大係列類別)=6000(頁麵)|-_小腻腻博客。

以上簡單描述的這些工作|||云谷彩票代理开户,目前都是我一個人在做--赢咖娱乐平台登录,這東西成型以後|-_自制直升机发动机,做一套網站(從前期到上線)-_|奥鹏学生中心,最快隻需要15分鍾|--渔我同行218。而我做它的目的也很簡單-_|大色鱼图片,就是希望幫助企業豎立品牌形象-淘宝包邮退货,並用專業知識解決他們所麵臨的問題-360彩票今日开奖公告,質量高價格低--殷世航。我的信仰是幫助企業或個人實現社會價值___城镇项目,賦予企業或個人一定的能力||重修之灭仙弑神续集,讓他們為這個社會做一定的貢獻_||茉兰多,履行一定的社會責任-|华硕f83s。先利他再利己_-|徐子淇八字,集體利益和集體主義優先-_-ovi套件官方下载。從成本評估到定價|_注册账号送200体验金,我是不賺錢__-辽宁电视台全运频道,但隻要我能活著_-_038爱彩网,就一定履行我的社會責任|_-苯乙烯密度。

說的有點多了_||脚踏淋浴器,言歸正傳-_19500彩票网苹果版,這章其實不難_|贵州兰花,但有些基礎知識需要細心講解||医学基础知识试题,對於有些設計師而言廢話較多||105彩票ios怎么下,但對於新手而言卻有可學之處||英德市人民政府网,多多體諒一下吧|-菊丸英二bg。

目錄

1.網格基數的設置

2.按鈕的基礎規範

3.按鈕的字符限製

4.按鈕的交互狀態

1.網格基數的設置

這裏的網格不是平麵設計中的網格係統|-单身公主相亲记优酷,是包含在繪圖工具中的網格功能|_|河南省焊工证查询,雖然它倆在本質上是相同的|__穿越之古灵精怪俏王妃,但現在先不要給它倆做過多的區分|-|辽宁财政企业服务网。用繪圖工具繪製網格能幫助我們約束模塊|--宝贝鱼翻译,使模塊的比例存在一定的關係__诺基亚ovi商店。例如我就拿尺寸大小為137×31的按鈕A|_|铆工是干什么的,和尺寸大小為128×32的按鈕B舉例-||摩托坊出售区,尺寸大小為137×31的按鈕A是不規範的|_优购工品,寬137和高31是不存在比例關係的---365彩票邀请码。而尺寸大小為128×32的按鈕B就是規範的__黄牛课件,寬128和高32不僅是倍數關係(128/32=4倍)_||银彩票,而且兩個數都可以整除我們在全局中設的基數4(32/4=8__娱乐天地检点登录,128/4=32-|_帅同文学转载,這裏的4為基數)___注册红彩彩票要邀请码怎么办。




當我們理解了按鈕的比例關係後|_-垃圾短信轰炸机,我們就要在繪圖工具中(AI--1分钟开大发快三骗局、Ps-_注册辉煌团队、Sketch__01官方彩票苹果版、Affinity Designer)找到我們的網格功能_-铜管重量计算,設一個數為基準-_-众盈彩票有人主动带你赢钱正常吗?,定其為基數__106官网彩票客服,然後按照這個基數來進行按鈕的繪製--成都群芳录,按鈕就相對是比較規範的---istoway。因為設置完一個基數後|||3cp彩票注册,隻要你在網格上畫按鈕|_打屁屁视频家法,都是存在一定的比例關係的--_易彩—彩民福地登录app。那如何用繪圖工具設置網格基數呢-|_360时时彩走势图彩,在Ps繪圖工具中找到--_移动彩票官11086:【編輯】-【首選項】-【參考線||小学优秀教师事迹、網格和切片】- 彈出首選項對話框 -【網格 – 網格線間隔 / 子網格】- 網格線間隔設為【4】- 子網格設為【1】|_小米盒子越狱;




在Affinity Designer矢量工具中找到_|乐山嘉州房产网:【視圖】-【網格和軸管理器】- 彈出網格和吸附軸對話框 -【基本】- 間距設為【4】- 分割設為【1】-_杭州sn。這裏為什麼要把網格基數設置為【4】呢--09彩票。這是穀歌Material Design繪製小組件的規範-坏蛋掌门人,而模塊之間定義的基數則為【8】__借身份证号,這裏的度量單位是DP-_|聚会去哪里,平時繪製網頁的話單位用px像素就可以-_掌上娱乐时时彩正规吗?。




2.按鈕的基礎規範

當我們會運用繪圖工具中的網格功能||塔罗牌大师tlp6868668,設置基數來繪製按鈕|_注册送彩的彩票APP大全,用熟練了就會相當講究_银河赌博是不是都作假,每一個細小的間距都應該符合倍數關係|_阳光家缘数据中心,不僅物理位置上能得到統一_|106cc彩票,視覺上也能滿足一定的美感_|143期双色球开奖中奖地,例如下圖所示|_基督教歌曲大全1218首。




當我們理解了如何用網格功能繪製一個按鈕後_|印度电视剧新娘之无悔的爱,接下來就可以理解按鈕的邊角的曲率設置了|-_陇南市人民政府网站。那我把按鈕的邊角分為三種樣式_最新刷q币软件:直角-||亿发彩票可以吗、曲率圓角和圓角_-众彩网双色球专家频道。直角就是邊角呈90度的角__盈彩网没有邀请码,曲率圓角和圓角的差別在於---陕西大专院校排名,曲率圓角的角弧度沒有那麼大||-摩托坊出售区,而圓角的角弧度就是一半個圓-|_重庆公安局局长。我將按鈕的曲率按照不同的樣式分布展示了出來-非诚勿扰房地产商,如下圖所示__|仔仔网电视剧。




理解了按鈕邊角的三種樣式|青莲大桥,要怎麼設置他們呢_|苏州地税局网站。直角設置無曲率/90度直角_2019注册送彩金26。圓角就設置為50%的曲率|_-霸气行会名字,剛好就是半個圓__|盈盈彩票网是正规的吗。而曲率圓角就稍微有點麻煩||永宁公众网,因為曲率圓角是要根據按鈕的大小做相對的變化的|_亿博娱乐彩票。按鈕的尺寸變大曲率就應該也隨之變大_-终结洪荒演义,按鈕尺寸越大差異越明顯-__舒城交友。另外曲率弧度的值也應該有一定的倍數關係或基數關係_|地震吧,例如||_和龙市政务信息网:4/8/16, 4/6/8-乐峰团购,4/8/12_|-2018版本彩票256,都是可取的|_反间谍工作的主管单位。




理解了如何設置網格基數_--新乡窝窝团购网,如何設置圓角的曲率_-|至尊争霸彩票是真的吗,就要講到按鈕的常用尺寸了-|泰国斗鱼繁殖,要注意的是這個常用尺寸是基於Web端的-兰西小屋论坛,道理是相同的||106官网彩票平台ios,就看設計師如何在移動端上進行設置了_-窝窝团新乡。常用的按鈕尺寸有_|_临川晚报:24px|-01彩票forios、32px-__亿客隆彩票是真的吗、40px_|-寻找了解绝杀技、48px-_众发娱乐属于赌博吗,超出48px的按鈕都屬於特殊按鈕--2000彩平台,需要進行單獨設置的-|上苍的馈赠。




這裏的尺寸不是死的--注册彩票平台的邀请码是干嘛滴,設計師可以根據自己的理解進行尺寸的設置_波多野结衣种子连接。而采用這幾個尺寸(24px|2m高手交流群、32px-|地精炼金术士、40px||好看的科幻电影推荐、48px)的目的是更好的統一並規範按鈕|-线性代数第二版答案,因為24px-|-珍爱十字绣花开富贵、32px--欧洲古典四大名著、40px--|22彩票改名了、48px都是4的倍數_-|qq2009版,數與數之間也都是±8的關係-_|11选5选号技巧,另外在繪製按鈕時尺寸也可以平分|_2011手机,留出按鈕上下均等的距離-|永胜国际投彩充10000,另外這幾個數值從Web端的體驗上來看||武汉华云桑拿,比例也是相對更合適的-_|中博彩票网,所以采用這幾個數較為規範一些--_广东高职院校排名。




3.按鈕的字符限製

一個按鈕包含和“無圖標”和“有圖標”兩種形式|||金沙石产地,無圖標比較好處理_-打磨木化石工具,直接把相應文本放在按鈕中水平_-评选优秀员工方案、垂直居中就可以了|-沣渭新区规划图,然後再算清文本與邊框之間的距離就可以了||盈彩靠谱吗。




那設計有圖標的按鈕時|-_2m永久资料全年开,就要考慮把圖標的內邊距算出來__-35彩票安卓,並與圖標到按鈕外邊距的距離算出來|-|劫后余生3.9。




當我們掌握的以上幾種繪製按鈕的方法||父亲的盾牌,就可以繪製出一整套符合規範的按鈕組件-陈国栋的秘书。




英文也一樣__英国玛格丽特公主,英文與中文的差別在於細微的尺寸差異_金箍棒dota。英文字體結構要比中文字體結構看上去更小一些-|-基加美修的召唤石,英文的字符長度也要比中文長很多__-132彩票手机版最新。但問題不大__至尊心水v358,隻要把控好文本/圖標和按鈕邊角的距離-|-南通汇通人才,按照基數遞增|芷江租房网,就不會有什麼問題||_盈彩网注册。




4.按鈕的交互狀態

一個按鈕的交互狀態有四種--_船歌鱼水饺团购,分布是||现任北京市委书记是谁:無狀態_-2018政府打击云联惠、hover(觸碰)|_|移动彩票靠谱吗、點擊後-|赢钱彩从哪下载、禁止___脚模图片。采用的配色可以遞增(由淺到深)_-|188小鱼儿玄机2站开奖,也可以遞減(由深到淺)_优彩登录。按鈕交互狀態的配色深淺也是根據整體頁麵有關的-_306定投。如果整體的調性偏深|-亿彩彩票,配色可以遞減(由深到淺)--众彩彩票骗局揭秘,如果整體的調性偏淺-|钻石王老五的艰难爱情全集在线观看,配色可以遞增(由淺到深)_||autocad2004中文版下载。




而顏色按鈕的交互狀態是根據配色的色階決定的--气雾剂之家,同理配色遞增(由淺到深)__|腾讯客服网站,配色遞減(由深到淺)__火线闲聊。




另外附上一張彩色按鈕狀態效果圖__|致富彩票快3,配色為明亮柔和-|-永盛彩票导航。





這些按鈕的繪製看似簡單的不得了-|掌上娱乐app,其實都是些高精度的工作_-01彩票真的吗?,差一個像素點都不可以_|希伯雅,當然更需要具備一定的毅力與耐心||001彩票助手。我覺得做設計應該追求極致||_3110c软件,重視體驗和功能_||多彩宝石图纸,讓形式追隨內容_-_双层大巴车价格,而不是內容追隨形式|赢钱彩app,就這樣吧_赢彩网大发快三邀请码。

藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__青铜粉,為期望卓越的國內外企業提供卓越的UI界麵設計|_村村通卫星电视升级、BS界麵設計 |_整理英文、 cs界麵設計 -|订造、 ipad界麵設計 ||_360彩票官网杀号定胆、 包裝設計

標簽: 視覺設計 按鈕

分享到_|_青岛市教育人事网: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap