UI设计中如果图标大小不一致一般怎么处理? 按钮和图标大小不一样怎么办
UI\u8bbe\u8ba1\u4e2d\uff0c\u5c0f\u56fe\u6807\u600e\u4e48\u5904\u7406\u80fd\u591f\u4e0d\u6a21\u7cca\u7535\u8111\u684c\u9762\u56fe\u6807\u53d8\u5927\u6a21\u7cca\u4e0d\u6e05\uff0c\u591a\u534a\u662f\u663e\u5361\u9a71\u52a8\u51fa\u4e86\u95ee\u9898\uff0c\u91cd\u65b0\u5b89\u88c5\u663e\u5361\u9a71\u52a8\u540e\u4fee\u6539\u5206\u8fa8\u7387\u5373\u53ef\u3002
\u8bbe\u7f6e\u5206\u8fa8\u7387\u7684\u5177\u4f53\u65b9\u6cd5\uff1a
1\u3001\u5728\u684c\u9762\u7a7a\u767d\u5904\u70b9\u51fb\u9f20\u6807\u53f3\u952e
2\u3001\u5728\u53f3\u952e\u83dc\u5355\u4e2d\u9009\u62e9\u5c4f\u5e55\u5206\u8fa8\u7387
3\u3001\u5728\u5f39\u51fa\u7684\u5bf9\u8bdd\u6846\u4e2d\u627e\u5230\u5206\u8fa8\u7387
4\u3001\u70b9\u51fb\u4e0b\u62c9\u6309\u94ae
5\u3001\u5728\u4e0b\u62c9\u83dc\u5355\u4e2d\u9009\u62e9\u5408\u9002\u7684\u5206\u8fa8\u7387\uff0c\u70b9\u786e\u5b9a\u3002
6\u3001\u5982\u679c\u684c\u9762\u663e\u793a\u51fa\u6765\u7684\u5927\u5c0f\u4e0d\u9002\u5408\uff0c\u5728\u8be2\u95ee\u662f\u5426\u4fdd\u5b58\u7684\u65f6\u5019\u9009\u5426\u3002\u91cd\u590d\u7b2c4\u30015\u9879\u3002
7\u3001\u5982\u679c\u684c\u9762\u5185\u5bb9\u5927\u5c0f\u9002\u5408\uff0c\u70b9\u4fdd\u5b58\u66f4\u6539\u5c31\u884c\u4e86\u3002
\u5982\u679c\u4ee5\u4e0a\u65b9\u6cd5\u4e0d\u884c\uff0c\u6216\u5206\u8fa8\u7387\u8bbe\u7f6e\u91cc\u4e3a\u7070\u8272\uff0c\u5219\u662f\u663e\u5361\u9a71\u52a8\u95ee\u9898\uff0c\u4e0b\u8f7d\u4e00\u4e2a\u9a71\u52a8\u7cbe\u7075\u8f6f\u4ef6\uff0c\u70b9\u66f4\u65b0\u9a71\u52a8\uff0c\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u518d\u6839\u636e\u4fee\u6539\u5206\u8fa8\u7387\u7684\u65b9\u6cd5\u8c03\u6574\u5230\u5408\u9002\u7684\u5206\u8fa8\u7387\u5373\u53ef\u3002
\u786e\u5b9a\u8ba1\u7b97\u673a\u5c4f\u5e55\u4e0a\u663e\u793a\u591a\u5c11\u4fe1\u606f\u7684\u8bbe\u7f6e\uff0c\u4ee5\u6c34\u5e73\u548c\u5782\u76f4\u50cf\u7d20\u6765\u8861\u91cf\u3002\u5c4f\u5e55\u5206\u8fa8\u7387\u4f4e\u65f6\uff08\u4f8b\u5982 640 x 480\uff09\uff0c\u5728\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u50cf\u7d20\u5c11\uff0c\u4f46\u5c3a\u5bf8\u6bd4\u8f83\u5927\u3002\u5c4f\u5e55\u5206\u8fa8\u7387\u9ad8\u65f6\uff08\u4f8b\u59821600 x 1200\uff09\uff0c\u5728\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u50cf\u7d20\u591a\uff0c\u4f46\u5c3a\u5bf8\u6bd4\u8f83\u5c0f\u3002
\u663e\u793a\u5206\u8fa8\u7387\u5c31\u662f\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u50cf\u7d20\u4e2a\u6570\uff0c\u5206\u8fa8\u7387160\u00d7128\u7684\u610f\u601d\u662f\u6c34\u5e73\u65b9\u5411\u542b\u6709\u50cf\u7d20\u6570\u4e3a160\u4e2a\uff0c\u5782\u76f4\u65b9\u5411\u50cf\u7d20\u6570128\u4e2a\u3002\u5c4f\u5e55\u5c3a\u5bf8\u4e00\u6837\u7684\u60c5\u51b5\u4e0b\uff0c\u5206\u8fa8\u7387\u8d8a\u9ad8\uff0c\u663e\u793a\u6548\u679c\u5c31\u8d8a\u7cbe\u7ec6\u548c\u7ec6\u817b\u3002
\u4f60\u628a\u56fe\u7247\u8c03\u6574\u4e0b\u6492!
首先，这种方法制作出来的图标大小为48px*48px，需要其他尺寸的图标可以做完之后等比放缩即可，放缩过程中可能需要注意半像素（见下文）的问题。
Material Design把图标的形状类型分为三种：圆形、方形和矩形。其中圆形的半径为44px，方形的边长为38px，矩形为44px*32px。
怎么判定图标应该套用那种尺寸的？有一种方法是：将图标与上图的模板居中对齐，然后中心不动，放大图标使之图标依次碰到三种形状的边界，填充最满的那个形状的尺寸就是该图标需要规定的尺寸。如下图，依次将设置图标放大并使之接触到不同形状的边界，可以看到在圆形里，该图标最大，证明设置图标最匹配圆形，所以使用圆形的尺寸44px*44px。
下面正式定义尺寸部分：
1. 如果形状为方形，则图标大小为38px*38px，若只是近似的方形，则取较小的边为38px，等比放缩。
2. 如果形状为圆形，则取图标大小为44px*44px，若只是近似的圆形，取较大的边为44px，等比放缩。
3. 如果形状为矩形，先令短边为32px，等比放缩图标，若此时长边大于或者约等于44px，则取长边为44px，等比放缩；否则，令长边为y，取长边为（44+y）/2，再向上取整，然后进行等比放缩。
根据以上的规则制定出来的图标，大小就会比较统一。如下图，左边是调整前，右边是调整后。（不过也有人反馈说看不太出来o(╯□╰)o）
顺便把这次整理图标遇到的坑也记录一下：
1. 关于半像素的问题。
半像素的问题主要是在进行Android不同尺寸适配的时候，有时候开发会要求图标不能出现非整数的尺寸，不然可能图标就会糊掉。所以在设计Android端使用的图标时，注意一下这个问题。适当地对尺寸进行四舍五入一下即可。
2. 关于iconfont的问题。
现在大部分团队都会将图标转换为iconfont，这样可以缩小整个项目的大小。图标在转换为iconfont的时候，会忽略所有的线条（包括填充色块的边）。所以，如果图标中有线条，则需要利用高度为1px的矩形代替，色块的边长需要用色块叠加来替代。
3. 关于对齐的问题。
如果有仔细看，我这个方法指定的图标大小为48px*48px，但是里面有内容的部分，比如说圆形，就只会占据44px*44px，这时候我们当然会希望把图形放置在图标的中央。免不了就会使用对齐工具，咻咻两下，一个上下居中对齐，一个左右居中对齐，搞掂。但是，慢着，如果仔细发现一下，你会发现看上去并不是居中的。这是由于人的视觉错觉造成的，这时候就需要进行适当的调整，通过自己的视觉判断来进行对齐。
4. 关于颜色统一的问题。
一般而言，图标设定为同一个色值（比如#999999）就能统一颜色，但是也有遇到过某个图标会显得颜色比较浅，具体原因未知，这时候就需要进行特殊的处理，比如设定更加深的颜色，比如#333333，具体通过自己视觉调整即可。
1、在桌面空白处点击鼠标右键
2、在右键菜单中选择屏幕分辨率
3、在弹出的对话框中找到分辨率
4、点击下拉按钮
5、在下拉菜单中选择合适的分辨率，点确定。
6、如果桌面显示出来的大小不适合，在询问是否保存的时候选否。重复第4、5项。
7、如果桌面内容大小适合，点保存更改就行了。
如果以上方法不行，或分辨率设置里为灰色，则是显卡驱动问题，下载一个驱动精灵软件，点更新驱动，安装完成后，再根据修改分辨率的方法调整到合适的分辨率即可。
确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，但尺寸比较大。屏幕分辨率高时（例如1600 x 1200），在屏幕上显示的像素多，但尺寸比较小。
显示分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。
1、在桌面空白处点击鼠标右键
2、在右键菜单中选择屏幕分辨率
3、在弹出的对话框中找到分辨率
4、点击下拉按钮
5、在下拉菜单中选择合适的分辨率，点确定。
6、如果桌面显示出来的大小不适合，在询问是否保存的时候选否。重复第4、5项。
7、如果桌面内容大小适合，点保存更改就行了。
绛旓細鏈変竴绉嶆柟娉曟槸锛氬皢鍥炬爣涓庝笂鍥剧殑妯℃澘灞呬腑瀵归綈锛岀劧鍚庝腑蹇冧笉鍔紝鏀惧ぇ鍥炬爣浣夸箣鍥炬爣渚濇纰板埌涓夌褰㈢姸鐨勮竟鐣锛屽～鍏呮渶婊＄殑閭ｄ釜褰㈢姸鐨勫昂瀵稿氨鏄鍥炬爣闇瑕佽瀹氱殑灏哄銆傚涓嬪浘锛屼緷娆″皢璁剧疆鍥炬爣鏀惧ぇ骞朵娇涔嬫帴瑙﹀埌涓嶅悓褰㈢姸鐨勮竟鐣岋紝鍙互鐪嬪埌鍦ㄥ渾褰㈤噷锛岃鍥炬爣鏈澶э紝璇佹槑璁剧疆鍥炬爣鏈鍖归厤鍦嗗舰锛屾墍浠ヤ娇鐢ㄥ渾褰㈢殑灏哄44px*44px銆
绛旓細鍦ㄧ粯鍒跺浘鏍囨椂锛鍙互鍏堟妸鍥炬爣缃戞牸妗嗘灦鎼缓璧锋潵锛屽啀鍦ㄦ鏋跺唴鍘昏繘琛屽浘鏍囩粯鍒銆傝繖鏍锋晥鐜囦細鏇 楂橈紝璋冩暣鍥炬爣鐨勫ぇ灏忚窡椋庢牸涔熸洿鏂逛究锛岀渷蹇冨張鐪佸姏锛
绛旓細涓夈佸浘鏍囪瑙夊钩琛 鍥炬爣鐨澶у皬涔熸槸璁捐甯堥渶瑕佽冭檻鐨勫唴瀹癸紝褰撳悓涓涓鐣岄潰鍑虹幇澶氫釜鍥炬爣鏃锛屾垜浠渶瑕佷繚鎸佹暣浣撶殑瑙嗚骞宠 銆傚苟闈炴墍鏈夊浘鏍囬兘閲囩敤鐩稿悓鐨灏哄灏辫兘杈惧埌骞宠 锛岀浉鍚屽昂瀵镐笅涓嶅悓浣撻噺鐨勫浘鏍囪瑙夊钩琛′篃涓嶇浉鍚岋紝渚嬪鐩稿悓灏哄鐨勬鏂瑰舰浼氭瘮鍦嗗舰鏄惧緱澶с傚洜姝わ紝鎴戜滑闇瑕佹牴鎹浘鏍囩殑浣撻噺瀵瑰叾澶у皬鍋氬嚭鐩稿簲鐨勮皟鏁淬傚洓銆佹敞鎰...
绛旓細1.鍥炬爣澶у皬 涓轰簡淇濊瘉鍥炬爣澶у皬鐨涓鑷鎬э紝鎴戜滑缁忓父寤虹珛鍩烘湰鐨勭綉鏍煎ぇ灏忔潵缁樺埗鍥炬爣銆傚父鐢ㄧ殑缃戞牸灏哄鏈:16銆24銆36銆48銆64銆128銆512銆1024銆傝繖浜灏哄涓鏄浐瀹氱殑锛屽湪璁捐涓鏈夌壒娈婄殑灏哄銆備緥濡傦紝璋锋瓕鍦ㄥ彴寮忕數鑴戜笂璁捐鍥炬爣鏃讹紝褰撻紶鏍囧拰閿洏鏄富瑕佺殑杈撳叆娉曟椂锛屼粬浠娇鐢ㄥ瘑闆嗗竷灞锛屽熀鏈綉鏍肩缉灏忓埌20涓備笅闈㈡槸澶у...
绛旓細绠浠嬶紝璁╀汉涓鐪嬪氨鑳芥噦锛屾墎骞冲寲涓轰富鐨勩傜粺涓鎬э細椋庢牸鐨勭粺涓锛濡傛灉鏄弿杈圭殑ico灏遍兘鏄弿杈癸紝濡傛灉濉厖鑹插氨濉厖鑹诧紝娓愬彉灏遍兘鏄笎鍙橈紝绔嬩綋灏遍兘绔嬩綋锛屾墎骞冲氨閮芥墎骞炽涓鑷鎬э細澶у皬鍜岀偣鍑诲尯鍩熺殑涓鑷达紝鍥炬爣鐨勫ぇ灏忓湪璁捐涓婂簲璇ユ湁涓鑼冿紝姣斿鎷変竴涓煩褰㈡斁鍦ㄤ笅闈紝浣滀负鐐瑰嚮鍖哄煙锛屾墍鏈夌殑ico鐨勫ぇ灏忛兘瑕佸湪閲岄潰銆
绛旓細鎺т欢鐩稿綋浜庣敱鑹插僵銆佹枃瀛椼佸浘褰㈢瓑缁勬垚鐨勪竴涓釜灏忓厓绱狅紝閬靛惊鍩虹瑙勮寖锛屽寘鍚鍥炬爣銆佹寜閽佹爣绛俱佸垎椤靛櫒銆佹皵娉°佹彁绀烘绛夈傛帶浠堕儴鍒嗗凡缁忔槸涓涓瘮杈冨簽澶х殑鍐呭锛屾墍浠ヤ互涓嬫垜鍙仛涓灏忛儴鍒嗙殑绀鸿寖銆傚浘鏍 涓轰繚璇佷笉鍚屽舰鐘剁殑鍥炬爣鍦ㄨ瑙変笂淇濇寔澶у皬涓鑷锛岄渶瑕佸埗浣滀竴涓浘鏍囩粯鍒舵ā鏉垮拰鍥炬爣鍒朵綔璇存槑銆傝鏄庝腑鏍囨槑鍥炬爣鐨勫渾瑙掋...
绛旓細Spotlight锛堟绱㈤〉锛夎瀹氶〉鍥炬爣 娑堟伅閫氱煡 ios绯荤粺鍥炬爣 瀵艰埅鏉″拰鑿滃崟鏍忓浘鏍 杩欏澶勭殑鍥炬爣澶у皬涓鏍峰叏鏄24x24pt锛岃緝澶т笉瓒呰繃28x28pt銆傛敞锛欯2x鍜孈3x鍦ㄩ昏緫鎬у儚绱犲崟浣嶆槸涓鏍风殑锛屽亣濡備綘搴旂敤濡係ketch銆丄dobeXD绛夌煝閲忕礌鏉愬伐鍏璁捐锛屽彲浠ュ弬鐓ч昏緫鍍忕礌鏁板艰璁″嵆鍙傛爣璇嗘爮鍥炬爣 iOS鏍囧噯涓璗ab鏍忎竴鑸湁浜斾釜銆佸洓涓...
绛旓細鎵嬫満杞欢瀹夊崜鍜岃嫻鏋滅殑涔熸槸涓嶄竴鏍风殑锛屽睆骞曚笉涓鏍凤紝鍥炬爣澶у皬涔涓嶄竴鏍凤紝鎵嬫満鍥炬爣灏哄鏄崟浣嶆槸DP锛屽畨鍗撲竴鑸槸72DP锛屾瘮濡720*1280鐨勫浘鏍囪鍋氬埌144PX锛濡傛灉鏄1920*1080瑕佽揪鍒216PX銆傚笇鏈涜兘澶熷府鍒颁綘
绛旓細1.鍍忕礌瀵归綈 闇瑕佷弗鏍肩殑鍋氬埌鍍忕礌瀵归綈锛屽挨鍏舵槸鍦ㄥ仛杈冨皬灏哄鐨鍥炬爣鏃锛濡傛灉涓涓ユ牸鐨勯伒寰儚绱犲榻愶紝閭ｆ渶缁堢殑鏄剧ず鏁堟灉灏变細鍑虹幇闂銆2.澶氱敤甯冨皵杩愮畻 鍦ㄥ仛鍥炬爣鐨勬椂鍊欙紝鑳界敤鍩烘湰鍥惧舰杩涜甯冨皵杩愮畻鐨勬椂鍊欙紝灏介噺涓嶈浣跨敤閽㈢瑪锛岃繖鏍峰仛鐨勫ソ澶勬湁濡備笅鍑犵偣锛氳浣犵殑鍥炬爣鏇村姞瑙勮寖;瀵瑰浘褰㈢粨鏋勭悊瑙ｆ洿鍔犳繁鍒;鍚庢湡鏇存敼褰㈢姸鏇村姞...
绛旓細3銆佸浜庣粏鑺傚埢鐢昏繃浜庡叿浣撱鍥炬爣鏈川涓婂彧鏄紶杈句俊鎭紝浣滀负绗﹀彿浠ｈ〃锛屽拰缈昏瘧涓鏍锋槸闇瑕佽绌朵俊銆侀泤銆佽揪锛岃屼笉鏄妱鐜板疄鐨勭粯鐢汇4銆佽瀺鍏ヨ繃澶氱殑鍝佺墝鍏冪礌銆備綔涓璁捐甯堬紝濡傛灉浣犳兂浣跨敤鍝佺墝鍖栫殑璁捐鏉ュ彇鎮︾敳鏂规垨鑰呰佹澘锛岃繖鏄棤鍙帤闈炵殑銆傝繖涓椂鍊欙紝浣犲彲鑳戒細浣跨敤鍝佺墝鑹插皢浜у搧涓殑鍥炬爣缁熶竴璧锋潵锛岃瀹冧滑鐪嬬湅璧锋潵鏄涓...
