精华内容
下载资源
问答
  • 干货|超全面的移动端UI 设计规范整理汇总(下)
    2021-06-09 03:12:14

    原标题:干货|超全面的移动端UI 设计规范整理汇总(下)

    来源:优秀网页设计

    六、APP版式设计规范

    版式设计又叫做版面编辑,即在有限的版面空间里,将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感,在 UI设计中版面设计的原则有哪些呢?

    1. 对齐

    对齐是贯穿版式设计的最基础,最重要的原则之一,它能建立起一种整齐划一的外观,带给用户有序一致的浏览体验。

    cdf1eb2c7c205de758db0b773efdb5dd.png

    2. 对称

    对称是宇宙间的设计哲学,是对立统一规律的本质属性,呈现出一种和谐自然的美,在应用界面的设计中,引导页设计、注册登录输入框和按钮等无一不是对称的设计。

    65910f7e0f4f305cb3854b8b724260d3.png

    3. 分组

    物以类聚,人以群分。分组是将同类别的信息组合在一起,直观的呈现在用户的面前,这样的设计能够减少用户的认知负担,在移动端界面的设计中最常见的分组方式就是卡片,为用户选择提供专注而又明确的浏览体验。

    dacf1fc91bbca997356b7de6304d251a.png

    七、界面文字设计规范

    文字是 APP 中最核心的元素,是产品传达给用户的主要内容,所以说文字在 APP 的设计中是非常重要的,那么,文字的字体如何选择,字号如何设定,是否加粗,颜色如何设置?

    在一款 APP 中字号范围一般在20-36之间(@2x),当然 iOS 11中出现了大标题的设计,字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。

    a6e4eac858a3c0acdbed5bd253d915fd.png

    关于字体:在 iOS 9推出之前设计师普遍采用华文黑体、谷歌思源、冬青等字体进行设计,iOS 9推出了苹果自己的字体——苹方!自此之后苹方字体被广泛应用于移动端设计中。

    关于字体颜色和是否加粗:字体的颜色设置我们一般很少用纯黑色,一般用深灰色和浅灰色、细体和粗体(注意要用字体本身的字重,不能用 PS 的加粗功能)来区分重要信息和次要信息,进行信息层级的划分。

    0e75e8bfedeabda401a1c7812322af83.png

    八、设计适配

    iOS 主流设备的分辨率分别是640x1136px(@2x)(iPhone SE)、750 x1134px(@2x)(iPhone6s/7/8)、1242x2208px(@3x)(iPhone 6s/7/8 Plus)、1125x2436px(@3x)/750x1624px(@2x)(iPhone X)。

    在设计设计中设计师需要设计一套基准设计图来达到适配多个分辨率的目的,我们可以选择中间尺寸750 x1134px作为基准,向下适配640x1136px,向上适配1242x2208px和750x1624px/1125x2436px。

    ee6a0f54750fa17c007cbac9db147387.png

    1. 750×1334向下适配640×1136

    由于750x1334px和640x1136px两个尺寸的界面都是2倍的像素倍率,因此它们的切片大小是相同的,即系统图标、文字和高度都无需适配,需要适配的是宽度。

    为了让大家了解适配的原则,我们以文字描述和图示的方式进行750x1334px到640x1136px的界面推导。

    绘制一个750x1334px的设计图,这是最常见的首页设计图,从上至下分别是状态栏、导航栏、首焦图、主要入口、分割、列表。

    b5a6717770482183e5e4c805e263c7a1.png

    下面开始进行适配,上面提到了由于750x1334px到640x1136px都是2倍的像素倍率,界面的图标、文字大小等都是相同的,所以我们不需要改变图像大小,只需将画布大小改成640x1136px即可,然后再改变横向元素的间距以达到适配的目的。

    首先打开750x1334px的设计稿,执行 Command+Alt+C(改变画布大小的快捷键),鼠标左键单击「定位」的左上角的格子,设置宽高为640和1136,点击「确定」。

    1a0abefb463e725bfb9efc462e6901dd.png

    改变画布大小之后,设计稿的右边和下边都被裁切(上面左图中半透明蒙版覆盖区域),画布缩小成640x1136px。

    上面左图裁切到右图适配完成,做了如下调整。

    导航栏右边的图标向左移动保持和原来的右边距一致,标题居中。

    首焦图高度除以1.17(750/640=1.17得到)后居中,宽度640px。

    主要入口右边的图标向左移动保持和原来的右边距一致,各图标的间距等宽。

    2. 750×1334向上适配1242×2208

    由于750x1334px界面是2倍的像素倍率,而1242x2208px是3倍的像素倍率,也就是说1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍,所以我们在进行适配的时候直接将界面的图像大小变为原来的1.5倍,然后调整画布大小为1242x2208px,最后调整界面图标和元素的横向间距的大小完成适配。

    上面说了整体思路,下面我们来说说具体怎么适配。

    首先对750x1334px的画布执行 Command+Alt+I 命令(调整图像大小),单位设置为百分比,宽高设置为150%,点击「确定」,调整之后的画布大小为1125x2001px。

    bb98c834ccb03bb10dce0b7157d0a16e.png

    紧接着对1.5倍之后的1125x2001px界面执行 Command+Alt+C(调整画布大小),鼠标单击「定位」左上角的格子,调整宽高为1242和2208px,点击「确定」。

    424e6d3d9c46e9bad73a7f135ea4c13f.png

    上面左图拓展画布到右图完成适配做了如下调整:

    导航栏右边的图标向右移动保持和原来的右边距一致,标题居中。

    首焦图的高度乘以1.65(1242/750=1.65得到)后居中,宽度1242px。

    主要入口右边的图标向右移动和原来的右边距一致,各图标的间距等宽。

    注:分割线仍是1px。

    3. 750×1334向上适配1125x2436px(@3x)

    与苹果之前发布的 iOS设备相比,iPhone X 的像素分辨率发生了变化,为1125x2436px(@3x),在实际工作中为了方便向上和向下的适配,我们仍然可以选择熟悉的 iPhone 7(750x1334px)的尺寸作为模版进行设计,只是高度增加了290px;设计尺寸为:750x1624px(@2x)。设计完成之后将设计稿的图像大小拓展1.5倍即可得到1125x2436px(@3x)尺寸的设计稿。

    在适配的时候需要注意,状态栏由之前的40px增加到88px,标签底部预留68px用于放置主页指示器,如下图所示。

    90335777324253548f42d9d06456a0e5.png

    关于主页指示器的适配涉及到两种情况:底部出现标签栏、工具栏等操作设计时,需要将底色下延68px并填充原有颜色,这样的处理可以让底部设计更佳简洁舒适,没有功能操作时,页面底部不需要填充颜色,只需盖住主页指示器即可。

    28bde67c951b68b3dd749bf1502a0d58.png

    对于大多数采用瀑布流的页面来说,仅仅是屏幕高度上的变化,可以无视。但对于如:新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。

    b603758f0998aef8ef5c59cf3e5fa3b0.png

    九、切图规范

    当界面设计定稿之后,设计师需要对图标进行切片提供给开发工程师,通常我们只需要对 icon 进行切图即可,文字、线条和一些标准的几何形状是不需要切图的,例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可,开发工程师可以用代码实现这种效果。

    6fa570d52128f0c3d613ed5dff60fc46.png

    1. 输出切片

    先将设计稿中的图标重新排列在一张新的画布中,保证同样尺寸的图标间距相同,这样做的好处是为图标建立一个控件库,有利于图标的整理。

    给每一个图标建立好参考线之后,用 PS 自带的切片功能,沿着建立好的每个图标的参考线画框即可,注意最后要输出 PNG 格式的切片(PNG 格式拥有更多的颜色和细节并且支持透明)。

    在具体操作时首先要将画布背景色去掉,让画布变成透明,做好切片后执行文件-存储为 Web 所用格式,在对话框中选择 PNG 格式,点击「存储」即可。

    68d96d66ff77caa9bab846365a91e75f.png

    注:图中标签栏图标的底色块是为了保证统一的切片尺寸,可以根据色块建立参考线,具体切图时要将色块去掉。

    2. 切片命名

    切片命名的通用规范是,界面_功能_状态.png。名称应使用英文命名,不要使用数字或者符号作为开头,使用下划线进行连接,例如一个首页处于正常状态下的按钮命名是 home_btn_nor@2x.png。其中界面首页是 home、空间按钮是 btn、状态正常是 normal。为了命名的正确性,设计师需要先和合作的开发工程师进行沟通确认。

    十、设计稿标注

    当界面设计定稿之后,设计师需要对界面进行标注给开发工程师在还原界面时进行参考。借助一些专业的标注工具有利于我们提高工作效率,常用的标注工具有 Mark Man 或 PX Cook。

    在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度;界面的背景颜色、不透明度;各个图标、列表、文字之间的间距。

    67c0625fff4e6387d77c4c6b2f8ccda3.png

    界面标注的作用是给开发工程师提供参考,因此在标注之前需要和开发工程师进行沟通,了解他们的工作方式,标注完成之后宣讲你的注意事项,以更快捷高效的完成工作,并且最大限度的完成视觉高的还原。

    总结

    本文整理汇总了包括界面尺寸、控件间距、版式设计规范、文字设计规范、设计适配、标注、切图等等一系列的移动端UI设计规范,在此期间查阅了大量的资料,共耗时一周完成本文的编写,希望为刚刚从事 UI设计的设计师们提供入门级别的帮助。

    至于为什么只总结了 iOS系统设计规范,而没有 Android系统的设计规范,在这里说明一下,本来安卓系统设计规范也是要涵盖的,但通过查阅资料发现安卓设计规范介绍少之又少,并且标准不统一,借鉴意义不大,所以省略了这部分规范的编写。

    责任编辑:

    更多相关内容
  • 这里分享一份我们定义MySQL开发设计规范包括表设计规范,字段设计规范,SQL编写规范 数据库对象命名规范 数据库对象 命名规范的对象是指数据库SCHEMA、表TABLE、索引INDEX、约束CONSTRAINTS等的命名约定 数据库对象...
  • 华为FPGA设计规范.doc

    2019-08-26 16:17:36
    最近编写了几个比较大的程序,深切体会到代码风格的重要性。好好看看吧,不学习的话要被大牛们BS的。 verilog , 风格
  • 建设国家标准制订、修订计划 ”的通知》的要求,本规范编制组在认真总结我国 视频安防监控系统工程的实践经验基础上,参考国内外相关行业的工程技术规 范,广泛征求国内相关技术专家和管理机构的意见,制定本规范...
  • 通信行业设计规范,根据工业和信 息化部“关 于安排 2009年《通信工程 建设标准》编制计划的通知”(工信部通函[2009198号)的要求 ,由 中讯 邮电咨询设计院有限公司会同有关设计单位 ,对原 中华人 民 共和国信息...
  • 修订碾压式土石坝设计规范含电力工业部和 水利部以电办号文对该规范的修改和补充规定的依 据为水利水电规划设计总院水规设字号文和 水利水电技术标准编写规定 颁布以来对我国土石坝的建设起到了巨大的推 动作用...
  • 译序:我在网上查找中文的GUI设计规范,居然没有详细一点的,一篇泛泛而谈的文章却被转载了几十次。只好退而求其次,找来这篇英文的,顺带翻译成中文,以方便国内编程人员。+++++++++++++++++++++++++++++++++++++++...
  • 《雄安新区数据资源目录设计规范
  • 原《煤矿井下排水泵站及排水管路设计规范》(GB 50451-2008)排水规范实施多年来,在保证矿井安全生产上起到了一定的作用。近几年煤矿排水的设计出现了一些新情况新经验,且为了与新的《煤矿安全规程》和《煤矿防治水...
  • 软件设计规范

    2018-01-22 15:09:56
    软件设计规范文档编写,可以按照这个编写软件设计规范文档,
  • MySQL数据库设计规范

    2019-03-06 19:26:54
    MySQL数据库与oracle、sqlserver等数据库相比,有其内核上的优势与劣势。我们在使用MySQL数据库的时候...在数据库变更和处理流程、数据库表设计、SQL编写等方面予以规范,从而为公司业务系统稳定、健康地运行提供保障。
  • 电子信息系统机房设计规范,本规范是根据建设部《关于印发“2005年工程建设标准规范制订、修订计划(第二批)”的通知》(建标函~20053124号)的...《电子计算机机房设计规范》GB 50174—93进行修订的基础上编制完成的...
  • UI 设计规范说明书 修订历史记录 日期 版本 说明 作者 1 前言 1.1 文档简介 本文档是对整个系统界面设计风格进行描述和用户交互的最终界面在 详细设计说明书 中设计和解释 1.2 系统定义 用户界面又称人机界面实现...
  • 本文是一套oracle、mysql数据库开发、设计所应遵循规范文档,按照此规范来开发可带来以下益处: 1. 代码的编写保持一致性; 2. 提高代码的可读性和可维护性; 3. 易于程序员间代码共享; 4. 易于代码的回顾; 5...
  • 测试用例设计规范, 所有测试部门都可以通用的资源
  • 工艺设计规范流程编写提纲.doc
  • 施工组织设计编写规范深圳市标准.doc
  • Verilog代码编写规范

    2020-08-14 11:43:04
    强调Verilog代码编写规范,经常是一个不太受欢迎的话题,但却是非常有必要的。
  • c程序设计规范

    2018-10-18 10:10:08
    本文档详细介绍了本公司制定的c语言设计规范,对软件编写的可读性和可移槙性具有较好的指导作用,尤其是对刚开始学习软件编程的人员具有很好的参考作用。
  • 的通知》的要求,本规范编制组在认真总结我国入侵报警系统工程实践经验的基础上,参考国内外相关行 业的工程技术标准,广泛征求国内相关技术专家和管理机构的意见,制定了本规范。 本规范是《安全防范工程技术规范...
  • 本规范是根据住建部《关于发印2011年工程建设标准规范制订、修订计划的通知》(建标[2011]17号)的要求,由中国电子工程设计院会同有关单位对原国家标准《电子信息系统机房设计规范》GB50174...
  • UI设计规范文档BS版

    2013-03-09 23:27:24
    为开发编码人员、UI设计人员、模版编写人员、界面测试人员等。 基于客户端的C/S版软件开发工作不适用本技术规范
  • 上海市建设项目(工程)竣工档案编制技术设计规范方案.doc
  • 详细设计说明书模板 详细设计说明书编写规范 详细设计说明书 软件模块详细设计模板
  • Java代码设计规范

    2014-08-19 11:19:53
    本文提供一整套编写高效可靠的 Java 代码的标准、约定和指南。它们以安全可靠的软件工程原则为基础,使代码易于理解、维护和增强。而且,通过遵循这些程序设计标准,你作为一个 Java 软件开发者的生产效率会有显著...
  • 软件测试用例编写规范软件测试该规范的目的是为用例设计人员提供测试用例编写的指导,提高编写的测试用例的可读性、合理性,及可执行性。使测试人员可以更好的执行测试,进而提高软件的质量。1、用例分类用例计划...
  • 本标准是GB/T8567—1988《计算机软件产品开发文件编制指南》的修订版,并改名为《计算机软件文档编制规范》。本标准从实施之日起代替GB/T8567—1988。 本标准与GB/T8567—1988相比,主要变化如下: a) 本标准增加...
  • 为了更好的理解和执行首版《煤炭工业露天矿节能设计规范》(GB 51197—2016),从规范编写目的、意义、章节构成及特点、重要条款解析、正确使用规范等方面,对首版规范进行了说明和阐述,以期能对推动露天煤矿节约能源,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 297,918
精华内容 119,167
关键字:

如何编写设计规范