解析GUI_移动护理系统设计规范

tiffany_s

华盛顿/设计爱好者/5年前/701浏览

版权

解析GUI_移动护理系统设计规范

tiffany_s

设计尺寸（屏幕分辨率），设备适配，字体字号，为设计导航让设计有理有据

设计前需要了解的：

1. PS是图像处理软件，处理位图（像素点组成的图像，最小单位是像素点）。

AI是处理矢量图（曲线或直线是计算而来的）缩放不失真，图像清晰。

2. WUI：web界面设计，系统设计，桌面端设计

GUI：智能手机app，平板（Pad）app

设计软件的选择

1. 绘图软件：Adobe Photoshop 2020

切图插件：cutterman

标注工具：PxCook

2. 绘图软件：Adobe Illustrator 2020（简称AI），导出成psd文件进行标注

切图：在AI中导出各设备尺寸图

标注工具：PxCook（支持psd文件，不支持AI文件）

3. 绘图软件：Adobe XD

切图：Adobe XD中选元素，导出-->所选内容，选择各设备参数，导出。

标注：选择工具选中画板名称，导出，PxCook，在PxCook中标注。

Adobe XD应用详见本人所写教程：

https://www.zcool.com.cn/article/ZMTEzMjMxMg==.html

4. 绘图软件：Sketch

苹果电脑的sketch直接可以连接苹果手机预览

标注工具：PxCook（Mac版）

Sketch应用详见本人所写教程：

https://www.zcool.com.cn/article/ZMTEzNjk4OA==.html

移动端设计协同工作工具

一. PS切图插件Cutterman安装后打开psd文件后使用。

ps cc 2018以上版本，目前最新版本ps 2020，安装切图插件cutterman，ps cc版本太低是安装不了cutterman的。“输出mipmap”是保存小图标，不选“输出mipmap”会生成drawable放大图片的文件夹。

图片，图标适配各种设备：

1. 安卓.9图片制作，点九图只需一张，不需要适配各种屏幕分辨率，因为图片自带伸展性。安卓.9图片转换软件.zip。安卓.9图片转换软件\9png\lib下的“draw9patch.jar”运行后点箭头，里面横竖向扩展部分画竖线。

2. Adobe Illustrator 2020中绘制的矢量智能图标，在ps插件cutterman中导出图片时候选择mdpi，hdpi，xhdpi，xxhdpi，xxxhdpi就能导出适配各种设备的各种尺寸的图片。

3. Adobe Illustrator 2020中导出svg矢量智能图标只需要程序员根据不同设备尺寸进行适配，svg矢量智能图标可用代码修改颜色和尺寸，可伸缩，高清不模糊。

二. 像素大厨PxCook

pxcook登录账号，进行云协作，这样重装系统或换台电脑时候不用找到.pxcp文件就能打开之前的文件。

创建项目时候创建云项目，这样文件在云上保存，本地psd文件不在了，项目中的文件还在，pxcook会经常提示更新，前期设置好云协作，之后就少为文件丢失操心。

pxcook标注：

1. 每个项目或产品一个项目标注文件“项目文件***.pxcp”，这样共用的标注方便查看。

2. 若将标注文字选成“dp/sp”，标注的文字会变成dp。

3. 标注字号选20比较容易看清。

4. 手动标注文字字号时前面加“字号：”再写单位px，一般用文字自动标注，PS中用工具属性栏中的Bold， Regular这样在pxcook中可以自动识别，字符面板中的加粗在pxcook中无法识别。

5. 功能模块文件夹中“1.设计”，“2.标注”，“3.切图”有些功能模块没有切图但大多数情况会有标注。

6. 文字，间距，圆角，颜色，尽量统一标准。

7. 标注时psd文件修改保存后，pxcook中会同步更新。

8. 手机分辨率宽为720px，时候，pxcook中查看，36px=18dp，px：dp=1：2，

dp与sp的换算用代码实现，代码能取到屏幕密度。因为屏幕密度不同，标注得用px为单位。

安装Px Cook时要安装，安装git小乌龟软件上传Px Cook安装文件，可以让前端直接看Px Cook中的内容。

三.ps play实时预览设计，最好用的设计稿预览工具

百度搜索ps play，手机扫二维码安装不了，手机端已下架，可以在web端下载apk安装包，用文件传输助手传到手机端，平板端安装，ps CC绿色免安装版在hp品牌机上要以管理员身份才能用，wifi得稳定，不然连接不上，不可以用数据线连接。psmirror只有15天免费试用，可以数据线连接，60元终身可以使用。

http://www.psmirror.cn

1. PS mirro插件安装程序下载：

http://www.pc6.com/softview/SoftView_508833.html

PS mirro注册试用15天，之后需要缴费。

psplay不清晰，而且老断线，可能wifi不稳定。

2. 手机或平板安装PS mirro apk安装包。

3. wifi或usb连接预览效果图。

===================================================================

APP的状态栏，导航栏、操作栏，主菜单栏高度用矩形工具绘制相应高度的矩形，按规定高度做辅助线。

更多内容区可以用白色渐变遮罩。

iOS规范

扁平化设计 (Flat Design)

中文：苹方，英文：San Francisco，数字：Helvetica Neue

最小触摸区域 44x44 pt

iOS的开发单位：Pt（“points”的缩写，点）1pt=1/72英寸

IOS 设计稿 屏幕分辨率：750px*1334px

各机型尺寸如下图所示：

各机型功能模块尺寸如下图所示：

一，IOS 状态栏和导航栏（具体尺寸见五点二图）

状态栏：显示时间、运营商信息、电池电量等信息区域。(齐刘海区域)

导航栏：状态栏下面的区域，含页面标题、功能图标等信息区域。

状态栏跟导航栏一般会进行一体化设计。现在流行大标题导航栏设计，也就是加大导航栏的高度，融入页面内容的标题，当内容上滑时，大标题再回归到常规导航高度。（大标题导航栏的高度一般为116pt（232px），这里包括了20pt（40px）状态栏的高度，同时也能放得下34pt（68px）的大标题和辅助信息（如返回等图标）。

导航栏中的元素必须遵守如下几个对齐原则:

1、返回按钮必须在左边对齐。

2、当前界面的标题必须在导航栏正中。（可无）

3、其他控制按钮必须在右边对齐。

二、标签栏（具体尺寸见五点二图）

标签栏：即Tab栏，为底部快速入口，iOS规范中Tab栏一般有五个、四个、三个图标的形式。分为“纯图标标签”和“图标加文字标签”两种形式。

三、字体

中文字体：PingFang SC，英文字体：SF UI Text 、SF UI Display，其中SF UI Text适用于小于19pt的文字，SF UI Display适用于大于20pt的文字。

四、切图命名规范

切图最后需要命名成规范格式，方便程序员查找。切图命名的格式建议全英文，如果大家英文不好需要想办法提升一点简单的词汇量。借由上述工具切图后，需要整理切图命名，或在切图之前对图层命名亦可。以下是切图元素的中英文对照：

如何用iOS的设计稿适配安卓

现在绝大多数公司限于人力物力的限制，不能把iOS和安卓的设计稿全部执行出来，因此就存在一稿两用的情况；设计师以iOS版本的设计稿来适配安卓，下面我们来看一组有趣的数学换算题：

1080/1.5=720，720/1.5=480，1242*2208/1.15=1080*1920，也就是说，1242*2208（iOS@3倍尺寸）与1080*1920（安卓尺寸）是可以等比缩放的，所以，iOS与Android的尺寸是可共用1242*2208px。因此，以iOS设计尺寸进行设计是可以适配Android的。（前提是必须和安卓工程师沟通清楚）

另一种方式，就是把750×1334px等比例调整尺寸到安卓1080×1920px，对各个控件进行微调，重新提供标注（用dp标注）。也就是需要提供两套标注，一套给iOS，一套给Android。

iOS开发语言

作为iOS开发工程师，最重要的三个工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的语言；而Swift开发非常高效。一般iOS工程师会在这两个语言中选择一种作为开发工具。UIKit是苹果系统自带的一套框架，这个框架里有设置按钮、滑竿、状态栏、电池电量、键盘等接口可供调用。所以我们看到很多第三方APP的界面中，有许多控件和苹果自带程序是一致的，这就是UIKit的功劳。

iOS开发里单位是pt

750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。（这也是为什么建议设计师用@1倍图做设计稿的原因）