設計語言 – 按鈕 (button)

2019-2-14 用心設計 設計思維

如果您想訂閱本博客內容||_中央13台在线直播,每天自動發到您的郵箱中|-_黄江小顺车行, 請點這裏

 

一個簡單的按鈕需要經曆無數次推敲_|-盈彩彩票安全吗,才能整合為設計語言|众博集团彩票。今天主講設計語言中的基礎部分|--承德会计之家网站,組件部分的其中一個部分-按鈕-铁通影院网址。設計語言從結構上分為_亿家欢:基礎部分-_|陈德铭去向、規則規範部分和業務部分|_金华艾克医院院长孙尚见,後麵我也會把其它部分補全|-_尊彩安全吗。

基礎部分的畫布大小是250000×56000|重庆厨房制造,共47個組件部分-_新四军片尾曲;規格規範部分就很龐大了(工業設計|__众彩国际是骗局吗、交互設計|-致胜网、平麵設計_|_花雕鸡是哪里的菜系、設計心理學等)-|_江苏移动商城币兑换;業務部分是按係列來分的-|淘宝卖东西,有主次之分__易彩彩票是正规的吗,目前隻分了兩個係列(N和S)__重庆邦家租赁,N係列對應基礎組塊|_-长虹手机客服电话,S係列對應嵌套定製組塊-易旺彩票网安全吗。我把一個係列的主係列稱為主版-_云顶娱乐平台不给提现,把子係列稱為子版_|说文解字txt。N係列的一個子版大概有50個頁麵|_-恋狱和之匣,每個頁麵又包含三種樣式|-白酒包装盒设计,每個係列中大概有20個子係列-||晨星基金排行榜。工程量很大-__七寸照片,大致算了一下-_-苏州名人馆,要做完兩個大係列(N和S)需要做-|_优发娱乐官网:50(頁麵)x3(樣式)x20(係列數)x2(大係列類別)=6000(頁麵)||-138影视。

以上簡單描述的這些工作|-重庆烟,目前都是我一個人在做_||八千网,這東西成型以後_-|创业 我们的故事,做一套網站(從前期到上線)--海信电视维修价目表,最快隻需要15分鍾_|_青岛黄岛论坛。而我做它的目的也很簡單---永盛时时彩,就是希望幫助企業豎立品牌形象-优彩彩票官网,並用專業知識解決他們所麵臨的問題|||富诚电商平台,質量高價格低__-40尺框架箱尺寸。我的信仰是幫助企業或個人實現社會價值_-歌手半决赛排名,賦予企業或個人一定的能力-__重庆药监局招聘,讓他們為這個社會做一定的貢獻|-_粤语输入法,履行一定的社會責任|-_铁梨花结局。先利他再利己|_-n78主题,集體利益和集體主義優先||神州行充值卡序列号。從成本評估到定價_|2m永久资料全年开,我是不賺錢|_西班牙赛道阀芯,但隻要我能活著--洪秀全公园,就一定履行我的社會責任_-|乐乐滋。

說的有點多了_食品生产经营人员多久必须进行健康检查,言歸正傳-_易富彩票注册,這章其實不難_|欧拉迪官网,但有些基礎知識需要細心講解_-注册送58元彩票体验金,對於有些設計師而言廢話較多|--038彩票平台坑人吗,但對於新手而言卻有可學之處|-花样滑冰鞋,多多體諒一下吧__癫痫1rdt。

目錄

1.網格基數的設置

2.按鈕的基礎規範

3.按鈕的字符限製

4.按鈕的交互狀態

1.網格基數的設置

這裏的網格不是平麵設計中的網格係統__-双性人生,是包含在繪圖工具中的網格功能|--注册自动送18,雖然它倆在本質上是相同的|_|注册送彩金彩票软件,但現在先不要給它倆做過多的區分--bmw尊选二手车。用繪圖工具繪製網格能幫助我們約束模塊||中博彩票投诉,使模塊的比例存在一定的關係u9u8。例如我就拿尺寸大小為137×31的按鈕A||138倍投,和尺寸大小為128×32的按鈕B舉例|亿人娱乐平台是骗局吗,尺寸大小為137×31的按鈕A是不規範的_-苯乙烯用途,寬137和高31是不存在比例關係的_南滨是哪个省的。而尺寸大小為128×32的按鈕B就是規範的-|_注册彩票平台的邀请码是干嘛滴,寬128和高32不僅是倍數關係(128/32=4倍)||_新台湾星光大道,而且兩個數都可以整除我們在全局中設的基數4(32/4=8_-平安果包装方法图解,128/4=32--金融市场学张亦春,這裏的4為基數)|-北京市工商局年检网。




當我們理解了按鈕的比例關係後||众彩彩票骗局揭秘,我們就要在繪圖工具中(AI-|0投入日赚1000的平台、Ps_-下雨声、Sketch__远途国际彩票软件、Affinity Designer)找到我們的網格功能--大城一中录取分数线,設一個數為基準|||城轨网上订票,定其為基數-|_永安彩票兼职,然後按照這個基數來進行按鈕的繪製|-云顶注册送25,按鈕就相對是比較規範的_|_赢发彩票。因為設置完一個基數後--进口货物报关单样本,隻要你在網格上畫按鈕_|_青岛订婚风俗,都是存在一定的比例關係的---众发赌博为什么不抓。那如何用繪圖工具設置網格基數呢||爱乐网,在Ps繪圖工具中找到_相信未来 朗诵:【編輯】-【首選項】-【參考線|_3尺是多少厘米、網格和切片】- 彈出首選項對話框 -【網格 – 網格線間隔 / 子網格】- 網格線間隔設為【4】- 子網格設為【1】-云顶娱乐怎么钱取不到?;




在Affinity Designer矢量工具中找到|-魅力研习所:【視圖】-【網格和軸管理器】- 彈出網格和吸附軸對話框 -【基本】- 間距設為【4】- 分割設為【1】|||阿里170号段预约网站。這裏為什麼要把網格基數設置為【4】呢_|2580彩票。這是穀歌Material Design繪製小組件的規範|青岛市教育人事网,而模塊之間定義的基數則為【8】-_|股指期货交易模拟盘,這裏的度量單位是DP038彩票苹果版打不开,平時繪製網頁的話單位用px像素就可以-7k7k7k。




2.按鈕的基礎規範

當我們會運用繪圖工具中的網格功能|-_078彩票平台登录,設置基數來繪製按鈕_|-108网投彩票网怎么样,用熟練了就會相當講究||掌上彩票打,每一個細小的間距都應該符合倍數關係-_苏州车管所网上选号,不僅物理位置上能得到統一|-货车司机罢运最新动态,視覺上也能滿足一定的美感|金甲战士大结局,例如下圖所示-|意彩。




當我們理解了如何用網格功能繪製一個按鈕後-|-力月西批发,接下來就可以理解按鈕的邊角的曲率設置了_||苦雨孤灯。那我把按鈕的邊角分為三種樣式|__召召与木木:直角|--广州上牌、曲率圓角和圓角-_|云顶国际彩票。直角就是邊角呈90度的角_-|易彩彩民福地登录,曲率圓角和圓角的差別在於||106苹果下载,曲率圓角的角弧度沒有那麼大_定西路1328号,而圓角的角弧度就是一半個圓_-亿发彩票安不安全。我將按鈕的曲率按照不同的樣式分布展示了出來-||媚行深宫,如下圖所示|锦州论坛。




理解了按鈕邊角的三種樣式__|2019注册送彩金26,要怎麼設置他們呢_|-234彩票客服怎么联系。直角設置無曲率/90度直角|_至尊彩大发快3网址。圓角就設置為50%的曲率|-_自动烹饪锅 林志鹏,剛好就是半個圓--|西安舞厅。而曲率圓角就稍微有點麻煩_-博客大巴登陆,因為曲率圓角是要根據按鈕的大小做相對的變化的|-135彩票是什么样的彩票。按鈕的尺寸變大曲率就應該也隨之變大-e738,按鈕尺寸越大差異越明顯_-拳王97电影。另外曲率弧度的值也應該有一定的倍數關係或基數關係|-至尊彩app是正规的吗,例如-_奾奿聊天室:4/8/16, 4/6/8||09被骗20w,4/8/12|_香港有线足球台,都是可取的|-_2号平台。




理解了如何設置網格基數||_阿凡提物流查询,如何設置圓角的曲率_-_注册送18元的彩票App,就要講到按鈕的常用尺寸了---苏锦良,要注意的是這個常用尺寸是基於Web端的|_|蘑菇街2013新款冬装,道理是相同的_-|云顶娱乐打鱼可提现,就看設計師如何在移動端上進行設置了_31选7走势图福建省。常用的按鈕尺寸有-初一下册数学期中试卷及答案:24px--qq2009精简版、32px___武汉文具批发市场、40px_-_众盈彩、48px谢谢你的温柔歌词,超出48px的按鈕都屬於特殊按鈕_-_沈阳调料批发市场,需要進行單獨設置的--qq2011官网下载。




這裏的尺寸不是死的_-1010cpcc时时彩票,設計師可以根據自己的理解進行尺寸的設置-__365彩票手机app下载。而采用這幾個尺寸(24px|_088彩票、32px___运盛娱乐平台登录、40px__|黄海地震、48px)的目的是更好的統一並規範按鈕__|侍从加文,因為24px_-诺亚舟np1000、32px__|台湾桔熊、40px-2019鸿运棋牌、48px都是4的倍數|-家庭教师漫画下载,數與數之間也都是±8的關係__|众发彩票官网首页,另外在繪製按鈕時尺寸也可以平分|-_宁远红网,留出按鈕上下均等的距離--|蜡烛颜料,另外這幾個數值從Web端的體驗上來看|_|红光二手房出售,比例也是相對更合適的||13彩票平台,所以采用這幾個數較為規範一些_||电信iphone4s套餐。




3.按鈕的字符限製

一個按鈕包含和“無圖標”和“有圖標”兩種形式__|刘一冰,無圖標比較好處理_-1010cpcc时时彩票,直接把相應文本放在按鈕中水平_--铠甲战士之勇者之路无敌版、垂直居中就可以了_二手丰田普锐斯,然後再算清文本與邊框之間的距離就可以了-_霍林郭勒政府网。




那設計有圖標的按鈕時_-和龙市政务信息网,就要考慮把圖標的內邊距算出來-_注册免费彩金申请,並與圖標到按鈕外邊距的距離算出來__扶风公众信息网。




當我們掌握的以上幾種繪製按鈕的方法_||陈元安,就可以繪製出一整套符合規範的按鈕組件|_薛丁山与樊梨花新版。




英文也一樣_-安溪天气2345,英文與中文的差別在於細微的尺寸差異--|345彩票正规吗。英文字體結構要比中文字體結構看上去更小一些_-奾奿聊天室,英文的字符長度也要比中文長很多_天星影院。但問題不大|-|透明售房网杭州,隻要把控好文本/圖標和按鈕邊角的距離|||李涵辰网站,按照基數遞增-|马三家子,就不會有什麼問題--_1号彩下载。




4.按鈕的交互狀態

一個按鈕的交互狀態有四種|-诛仙入魔任务流程,分布是_|东北二嫂水仙视频种子:無狀態|_晨星基金业绩排行榜、hover(觸碰)_cfve修改器怎么过安、點擊後|-金立a5游戏下载、禁止--守护甜心第四季预告。采用的配色可以遞增(由淺到深)__优彩票平台登录,也可以遞減(由深到淺)|钱宝网最新消息2018年。按鈕交互狀態的配色深淺也是根據整體頁麵有關的|_烈女蒋究。如果整體的調性偏深--苍井空 ed2k,配色可以遞減(由深到淺)|张柏芝约谈谢霆锋,如果整體的調性偏淺||-圣三一教堂,配色可以遞增(由淺到深)|盈众彩票开盘多久了。




而顏色按鈕的交互狀態是根據配色的色階決定的|-斗战神怎么入定修炼,同理配色遞增(由淺到深)-_|内地主持人排行榜,配色遞減(由深到淺)3g彩票开奖预测。




另外附上一張彩色按鈕狀態效果圖__球衣之家,配色為明亮柔和_|16楼网。





這些按鈕的繪製看似簡單的不得了_|_106官网彩票不能提现,其實都是些高精度的工作_-c罗电梯球教学,差一個像素點都不可以-|wj00001,當然更需要具備一定的毅力與耐心-||诸葛智彩软件。我覺得做設計應該追求極致--|总裁太大了边做边放药,重視體驗和功能|||强心脏20110823,讓形式追隨內容|-36选7开奖结果广东,而不是內容追隨形式___天天酷跑九月幸运星,就這樣吧|-网上三好街报价。

藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-__11选5每天赚200元不难,為期望卓越的國內外企業提供卓越的UI界麵設計|仙剑奇侠传5 破解、BS界麵設計 _||雪碧真我篮球、 cs界麵設計 --|步步高i710手机壳、 ipad界麵設計 |--078彩票登录、 包裝設計

標簽: 視覺設計 按鈕

分享到--易投彩票是不是合法的: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap