ui界面设计距离 (苹果i7界面设计规范)

UI规划网页规划字体标准应该要注意什么

许多刚做APP界面的规划师，常常会由于字号，字体色彩，间隔而困扰。下面共享一些界面中常用的字体，字号，字体色彩及间隔对齐的一些小经验。期望能对咱们有些协助。

惯例字体的运用标准

在每个项目规划中只运用1-2个字体款式，而在品牌字有明晰的标准的情况下，只需求一种字体贯穿全文，经过对字体扩大来着重要点案牍。字体用的太多，越显得不行专业。

不同的款式的字体，形状或系列最好相同，确保字体风格的一致性。

字体与布景的层非必须清楚,确保字体款式与色彩气氛相匹配

界面中文字运用的规矩

在不同渠道的界面规划标准中的字体会有不同，像移动界面的规划就会有固定的字体款式。网页中会有常用的几个字体

移动端常用的的字号--导航主标题字号：40-42px，偏小的40px字号，显得精美些

在内文展现中字号巨细--大的正文字号32px，副文是26px，小字20px。

在内文的运用中，依据不同类型的App会有所区别。像新闻类的APP或文字阅览类的APP更重视文本的阅览快捷性，正文字号36px，会挑选性的加粗。而列表方法、东西化的APP遍及是正文32px，不加粗。副案牍26px,小字20px，26px的字号还会用于区别类别的提示案牍，由于这样的文字期望用户阅览，但不要抢过主列表信息的引导。36px的字号还常常运用在页面的大按钮中。为了摆开按钮的层次，一起加强按钮引导性，选用了稍大号的字体。

在选用字体巨细的时分一定要挑选偶数的字号，由于在开发界面的时分，字号巨细换算是要除以二的。这个具体缘由咱们能够网上查询，我就不在这逐个的介绍了。

常用字号的巨细根本就这几个，依据版式规划需求也会选用异常巨细的字号来特别处理。这种更高的要求规划师的大局把控才能了。

网页端常用的字号有哪些呢？网页中文字字号一般都是宋体12px或14px(无状况)，大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px，一般运用双数字号，奇数的字体在显现的时分会有毛边。

常用的字体

①平平稳稳:微软雅黑/方正中黑

微软雅黑系列：在网页规划中这款字体运用的十分普通，这款只无论是扩大仍是缩小，形体都十分的规整舒畅。在规划进程中主张多运用雅黑，大标题用加粗字体，正文用惯例字体。

方正正中黑系列：中黑系列的字体笔画比较锋利而淳厚，一般运用在标题文字中。但这种字体不适用于正文中，由于边际相对比较的杂乱，文字一多会影响用户的阅览。

②与时俱进：方正兰亭系列

方正兰亭系列: 个人最引荐的便是这个系类的字体，整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画明晰简练，这个系类的字体就足以满意排版规划的需求。能够经过对这个系列的不同字体进行组合，不仅能确保字体的一致感，还能很好的区别出文本的层次。

③.刚劲有力，运动型：汉仪菱心简/造字工房力黑/造字工房劲黑

在这几个字体中，他们有着一起的特色，字体十分的有力而扎实。根本都是以直线和斜线为主。合适广告和专题运用。在运用这类字体的时分咱们能够运用字体歪斜的款式，让文字显得更为生机。在这三种字体中，菱心和造字工房力黑在笔画、角落的当地选用了圆和圆角。并且笔画也比较的疏松，更多的有些时髦而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体运用在大图中偏多，作用比较突出。

一个完好的UI规划，需求那些进程
一、产品定位与商场剖析阶段
1、 意图（UI规划师应了解产品的商场定位、产品界说、客户集体、运转方法等。） 2、 主要履行人员（UI、UE、需求）
3、 需交流人员（出售）
4、 完结过程（会议评论）
5、 UI主要职责：（界说用户群特征、界说终究用户群、界说产品方向）
二、用户研讨与剖析阶段
1、意图（UI规划师搜集相关材料剖析方针用户的运用特征、情感、习气、心思、需求等，提出用户研讨陈述和可用性规划主张。这部分作业有团队合作完结。时刻与项目需求答应的情况下，更能够拟定实景用户剖析）
2、主要履行人员（UI、UE、需求、技能）
3、需交流人员（出售）
4、完结过程（纸搞线稿、是非稿、原型）
5、UI主要职责（搜集相关材料剖析方针用户的运用特征、情感、习气、心思、需求等，提出用户研讨陈述和可用性规划主张。这部分作业有团队合作完结。时刻与项目需求答应的情况下，更能够拟定实景用户剖析）
三、架构规划阶段
1、意图（这儿涉及到比较多的界面交流与流程的规划，依据可用性剖析作用拟定交互方法、操作与跳转流程、结构、布局、信息和其他元素）
2、主要履行人员（UI、UE、需求部分）
3、需交流人员（技能、出售）
4、
完结过程（UI进行风格规划出界面，和需求部分拿出定稿；UE对原型进行优化，收拾出交互及用户体会方面定见，反馈给UI及需求部分；UID等候作用图。
开端代码编制）
5、UI主要职责：（依据能够性剖析作用拟定交互方法、操作与跳转流程、结构、布局、信息和其他元素。界面规划、图标规划、风格规划）
四、原型规划阶段
1、意图（依据进展与本钱，能够把原型控制在“手绘-图形-Flash-视频几个质量范围） 2、主要履行人员（UI、UE、需求部分）
3、需交流人员（UID、技能）
4、完结过程（规划标准；代码及程序开发）
5、UI主要职责：（对前面所以作业以规划方面的施行，依据进展与本钱，能够把原型控制在“手绘-图形-Flash-视频几个质量范围，原型的实质更倾向与一个DEMO，它不需求有悉数的功用，但要体现出规划目标的根本特性）
五、界面规划阶段
1、意图（依据原型规划阶段的界面原型，对界面原型进行视觉作用的处理）
2、主要履行人员（UI、UE、技能）
3、需交流人员（UE、出售）
4、完结过程
5、UI主要职责：（该阶段承认整个界面的色彩、风格、界面、窗口、图标、皮肤的体现）
六、界面输出阶段
1、意图（合作好开发人员完结相关的界面结合）
2、主要履行人员（技能）
3、需交流人员（UI、UE、需求部分、出售）
4、完结过程
5、UI主要职责：（对界面规划阶段的最终作用合作技能部分完结界面规划的实际作用）
七、可用性测验阶段
1、意图（针对一致性测验；信息反馈测验；界面简练性测验；界面漂亮度测验；用户动作性测验；行业标准测验）
2、主要履行人员（程序测验部分）
3、需交流人员（UI、UE、程序、需求部分、出售）
4、完结过程
5、UI主要职责：（担任原型的可用性测验，发现可用性问题并提出修改定见）
八、完结作业阶段
1、意图（关于前面七个阶段的规划作业进行细节调整）
2、主要履行人员（UI、UE）
3、需交流人员（技能、出售）
4、完结过程
5、UI主要职责：（可用性的循环研讨、用户体会回馈、测验回馈、UI人员把可行性主张进行完善）
九、产品上线
1、意图（查验前面界面规划的作用是否契合商场及用户集体）
2、主要履行人员（出售）
3、需交流人员
4、完结过程
5、UI主要职责：（搜集商场关于产品的用户体会，并记载诚文字说明）
十、剖析陈述及优化计划
1、意图（了解整个界面规划的优缺）
2、主要履行人员（UI、UE）
3、需交流人员（技能、出售）
4、完结过程
5、UI主要职责：（关于前九个阶段的界面规划进行具体体系的收拾，为下一次界面规划供给有力的商场及专业论据）
UI做界面怎么确保间隔
间隔无处不在，界面中的边距，间隔上边，左面，右边，顶部等各种特点。因而作为一名规划师，咱们需求很好的把握各种间隔规矩，经过间隔规矩很好的安排好内容。
1. 定最小原子单位
这个最小间隔规矩能够是3的倍数，像蘑菇街、豆瓣相同，假如你期望产品留白比较多，也能够是5的倍数，例如
pinterest、亚马逊等，这个没有肯定的，全部依据你们产品内容丰富程度决议。
2. 承认间隔弹性
有一个相似查询，便是在用4作为规划原子间隔做规划时分，规划师运用最多的间隔有哪些?作用很有意思，运用16的占一半，8和32的占一半，所以界说太多间隔其实毫无意义，只会带来规划时分的不承认元素。
3. 依据事务场景，界说间隔
正如前面所说，过多间隔规矩，只会带来规划师困惑，徒增界面杂乱性，对开发，对规划师都是一种担负，所以咱们在界说间隔时分，一定要少，要让咱们间隔准则掩盖到绝大多数场景。能够从
XS，S，M，L，XL 为参阅，小，中，大为纬度。
一致简化间隔规矩，构建一致性界面，所有边距，元素空间都遵从规矩时分，关于视觉规划和开发人员来说，都能很优点理一致性和功率问题。
在咱们刚开端规划时分，可能会觉得没有真实的优点，可是当项目越来越杂乱时分，团队规划越来越大，每天处理各种规划原子和规区别子时分，你会发现，当你运用固定的间隔，它会比之前随意的间隔规矩有更好的作用。