2024年网页ui设计按钮尺寸 篇1
WEB端
必备元素：logo、menu（导航）、banner（动效【flash、H5】）、内容区（新闻、企业简介、产品展示...）、版权信息（版权所有、联系方式）
可选元素：搜索、电话、在线客服、流量统计...
用户体验习惯：左：浏览区域、列表区域
右：功能区域、内容区域
字体：最小12px，最黑#333333
字体12 px、14px、16px效果选择无，其他字号则用锐利、犀利、浑厚等
标题部分字体：14px~24px（尽可能采用雅黑）
正文部分字体：12px、14px（雅黑或者宋体），字行距一般为1.5~2倍之间。
尺寸规范：在分辨率1024px*768px的情况下，满屏宽度为1003px，通常定义可视范围为920px~1000px之间。常见：宽960px、980px、1000px，一屏高度650px。
UI方面
iOS
iphone字体、字号标准
字体：中文：苹方 ； 英文：旧金山
字号：正文最小24px ； 常驻栏icon20px
Andriod
字体：中文：思源黑体 ； 英文：roboto
字号：注释最小：24px ； 文本：28px ； 文章标题或图标名称：32px ； 导航标题：36px（在这里为720px*1280px的尺寸下设计规范，注：1sp=2px）
界面尺寸
图标尺寸
以上内容希望可以帮到你！
2024年网页ui设计按钮尺寸 篇2
5分钟快速了解UI设计规范
每位UI设计师，想必都有一套属于自己的设计规范，今天我就来教大家在5分钟快速建立一套自己的设计规范。
我今天讲苹果版本的（尺寸：750*1334），因为现在很多的设计师就做一套UI图，安卓版本的基本就已经省略掉了，原因很简单，是的没错，就是节约时间哈。底部栏与顶部栏的规范
下面第一张图是底部栏的设计规范，第二张图是加图标展示，底部栏高度为49px，在我以往的设计工作经验中，常见的分为3种情况，3个图标、4个图标的、5个图标的，不管是那种我们应该按照规范来，这样前段在开发时就会比较方便，按照几等分（n/375），底部的图标我习惯用28*28px（尺寸：375*667，最后导两倍的图给前段开发），底部文字都用10px。
底部栏
接下来我们看第三张顶部栏的设计规范图，顶部栏的高度一般为64px，标题文字我喜欢使用18px,不过还是要看自己的设计风格。
顶部栏
字号与字色的规范
字号的大小使用也是非常的重要，之前我的一个客户，希望我能够把字体设计大些，他的原因是字号越大会体现一个企业的大气感，其实这样往往适得其反。
你们一般在进行设计时，会使用几号字体呢？正文我最喜欢用的是14号、16号，我已经把我经常用的字号整理出来了，大家可以看下面的图哦。
字号
字色
两侧间距及模块上下间距的规范
在设计时，我们有必要两侧留间距，常见的有14px、16px、24px，上下间距常用10px,在开始做UI图的时候，最好确定好一个值，在后面设计其他页面的时候，都可以用同一个值，保证自己设计的风格，不会让人误以为随便留的。
两侧间距
模块上下间距
按钮及模块高度
按钮是UI设计中最常用的一个元素，几乎每个项目都会有它的出现，在不同的UI设计中，Button本身会根据主体风格制作，不同大小的按钮样式会有所不同，下面是我画出来的几种常用的按钮大小。
按钮
模块高度
图标及辅助线的规范
在画图标的时候，务必将图标限制在正方形中并创建为组件，这样既方便以后修改也方便开发。图标
16*16:非可单独点击；22*22:最小可单独点击按钮；24*24：表单小图标；28*28:底部标签栏，其他的视情况而定。
辅助线
UI设计中我们看见的辅助线一般分为两种：投影型、画线，我个人认为投影型是非常实用的，看起来不会那么死板，而且有一个好处，可以确定文案的位置，保证了设计的规范性，细节可以让整体看起来更完美。
图片、视频大小的规范
图片常用的比例为1:1、2:1、4:3；视频常为16:9，这里我讲的是我平常经常会用着的尺寸，还有其他的情况就个人而定哦！
总结：我们在平常的设计中只要能够把握这些设计的规范，对你所做的产品足够了解，就能高效的设计好的作品啦，唯有坚持，方能不负所爱，加油！
打字不易，欢迎点赞及评论，说说你们在UI设计中常用的规范是什么？
点击头像关注我，私信回复007，免费获得UI设计相关规范源文件，谢谢支持！
2024年网页ui设计按钮尺寸 篇3
我一个做嵌入式开发的工程师觉得，UI设计并不难，对小公司来说一般都是工程师客串一下给做了。比如我，就同时做单片机的电路设计和程序设计。UI设计是后期顺带着一起做了，因为小公司，是不可能面面俱到的给你配好各种各样的人才的。
我做UI设计，一般是根据系统要实现哪些功能，然后需要在人机交互界面上现实哪些信息，然后在Excel表里做一个很粗糙的界面。把系统要达到的目标都搞清楚了以后，就可以进行详细设计了。
详细设计我一般用photoshop，coreldraw来做界面设计，这些软件也很简单容易上手，装上以后就能用，不懂的直接百度搜索就行了。
UI设计你可以设计的很简单，一个页面加几个按钮，几个文本输入和显示搞定。但现在的人机交互界面都讲究美观大方，有亲和力。这就需要你下点功夫了，但简约而不简单的设计理念还是要遵循的，不能把界面设计的花里胡哨，让人一看就很low的感觉。
界面上各种控件大小，位置安排要合理。各种颜色搭配要协调，质感要好。
界面的设计要思路清晰，让人一看就知道什么意思。苹果手机的拟物化设计的很不错，让人很接近现实世界的感觉，能够快速上手。
当然我说这些还是最基本的要求，你要设计的更加专业，与众不同，还是需要多动脑筋的，甚至需要你美术方面的功底。
总而言之，世上无难事只怕有心人！