标签：间距 界面 布局 设计 尺寸 iPhone 边距 原型 页面

最近画原型的时候，一直在想一个问题。就是怎么才能做到高保真、更加规范、增强原件的复用性？嗯哼，所以决定总结出一些有规律的东西，可以自己保存并且给他人使用。

目录

 一、界面的设计尺寸和栏高度

 二、边距和间距

 三、内容布局

 四、界面图片设计比例

 五、界面文字设计规范

目前主流的 iOS 设备主要有 iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸）。

iPhone界面尺寸1iPhone界面尺寸2
二、图标尺寸
iPhone图标尺寸
三、边距和间距
在移动设计中，我们常常将简单的页面布局好，要将各个原件布局在页面当中。原件摆放的位置、间距都影响着一个原型的美感和使用。

1. 全局边距

全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。

常用的全局边距有32px、30px、24px、20px等等，当然除了这些还有更大或者更小的边距，但上面说到的这些是最常用的，而且有一个特点就是数值全是偶数。

以 iOS 原生态页面为例，「设置」页面和「通用」页面都是使用的30px的边距。

iOS边距
再以微信和支付宝为例，他们的边距分别是20px和24px。

微信和支付宝边距
还有一种是不留边距，比如站酷APP（当然站酷APP 也进行了改版，首页已经采用了不通栏的卡片式设计）。这种图片通栏显示的设置方式，更容易让用户将注意力集中到每个图文的内容本身，其视觉流在向下浏览时因为没有留白的引导被图片直接割裂，造成在图片上停留更长时间。

站酷边距
2. 卡片间距

至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，过小的间距会造成用户的紧张情绪，使用最多的间距是20px、24px、30px、40px

微信卡片间距
3. 内容间距

内容布局时，一定要重视邻近性原则的运用。每一个应用名称都远离其他图标，与对应的图标距离较近，保持亲密的关系，也让用户的浏览变得更直观。

“邻近原则”
四、内容布局
最常用的两种布局形式，列表式布局和卡片式布局。

1. 列表式布局

要注意列表舒适体验的最小高度是80px，最大的高度要视内容的多少而定。

唯品会布局
微信和QQ列表布局
 

2. 卡片式布局

卡片式布局
 

五、界面图片设计比例
UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）。

图片比例
六、界面文字设计规范
在一款 APP 中字号范围一般在20-36之间。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。

界面文字设计规范
 

七、网站首屏标准

下面这个是div的布局标准，我觉得可以做来参考

-----------------------------------
©著作权归作者所有：来自51CTO博客作者mb60ee95e15ce6d的原创作品，请联系作者获取转载授权，否则将追究法律责任
Axure原型APP设计规范
https://blog.51cto.com/u_15303157/3089907

标签：间距,界面,布局,设计,尺寸,iPhone,边距,原型,页面
来源： https://www.cnblogs.com/htblog/p/16363227.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。