手机软件界面设计流程 第1篇
1、产品需求分析
当一个UI设计师拿到项目或者需求之后,正常情况是交互设计师细化过后的交互文档,里面包含交互原型。而作为ui设计师所要做的就是理解并吃透文档,包括里面交互逻辑,具体的操作方式,流程,反馈等,需要不断核对和确认。
2、深层次的用户体验研究与分析
对已定义的目标用户群体及特征进行深层次的剖析,包括目标用户群体的年龄,性别及目标户群体的一些情感习惯,心理特征等,这样就可以有针对的对这个产品构想设计出一个大概的色系搭配及元素控件设计。
3、初稿设计
结合产品设计原型和自己对产品的体验研究分析结合起来设计初稿。(大概的色系搭配,框架布局,元素控件,图标ICON等设计都可以在这一步呈现出来)
4、视觉规范设计及细节优化设计
初稿设计完成后,就是要做好视觉规范设计及细节优化设计。视觉规范设计就是要对整个产品的颜色,字体,字号,元素控件,图标ICON,间距及交互效果做个统一的规范,这样才可以做出一个成熟的产品,对前端制作也是有很大的好处的。
5、前端对接
确认完设计稿后,进入ui设计师与前端工程师对接的阶段,ui设计师需要提供切图,标注,设计说明文档以及设计图给到前端工程师。这个阶段需要保持跟开发频繁地沟通,确保可以很好地还原设计稿(实际工作中很难苛求百分百还原),特别是需要设计师自身要懂得一点前端代码知识,可以更好地进行沟通。
6、测试与反馈
产品进入到测试阶段,需要测试人员介入,一般这个时候是先部门内部进行可用性测试,然后扩大到整个公司,反复测试几轮之后确保没有很大的问题之后才可以发包给客户测试或者上线,而ui设计师这个时候就要收集反馈,收集意见,与产品一起讨论改进方案。
手机软件界面设计流程 第2篇
(1)、画布尺寸
新建750×1334 分辨率72,像素/英寸。
(2)、常见的字体大小
24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。
(3)、常用字体
中文用苹方黑,英文用San Francisco,如果安不上也可以用Helvetica代替。
(4)、界面里的小图标常见的尺寸
注:ios开发里单位是pt
750×1334尺寸的换算关系 1pt=2px,也就是说程序员拿到我们的px单位的标注稿,自己除以2就是pt了。
24px、32px,48px等,记住4的倍数比较好。
注意图标的尺寸要统一尺寸,以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大,需要调整下。
界面上的间距和元素尺寸:
以偶数为单位,不清楚的可以截图量大公司的APP界面作为参考。
750 x 1334 设计稿尺寸:
状态栏高度:40 px
导航栏高度:88 px
标签栏高度:98 px
(1)、画布尺寸
如果想一稿适配ios,那就新建720×1280 分辨率72,像素/英寸。
如果单独设计安卓MD新规范的,那就新建1080×1920 分辨率72,像素/英寸。
(2)、720×1280常见的字体大小
24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。
(3)、常用字体
中文用Noto/思源黑体(是一个字体,叫法不同而已),英文用Roboto。
(4)、界面上的间距和元素尺寸
最新规范MD的做法:
8dp原则:栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。
常见一般常用做法:
直接把ios的设计稿照搬过来,只不过状态栏,导航栏,标签栏按照安卓的来。
720 x 1280 设计稿尺寸:
状态栏高度:50px
导航栏高度:96px
标签栏高度:96px
手机软件界面设计流程 第3篇
1、手机操作系统界面设计
一般的手机操作系统都是指智能手机的操作系统,主要完成网络、流媒体等功能,一定程度上取代电脑成为网络终端。手机操作系统界面设计需要从整体风格到细节图标、元素的全面把握,另外还需要掌握一定嵌入式方面的技术知识。
2、手机应用界面设计
手机应用作为手机第三方程序,已逐渐把用户带入使用本地客户端上网的时期。手机应用种类多样,其中一些应用软件功能类似,但都在设计与使用上有所差异,_良好的用户体验_已成为APP竞争的标配。
手机软件界面设计流程 第4篇
1、Adobe Photoshop
2、Sketch
Sketch是适用于Mac设备的网页设计软件。它是专注于创建Web模板和设计的专业工具。它适用于矢量图像,因此您将获得最佳,最高分辨率的结果。工具栏和选项非常简单。Sketch提供了创建和管理Web设计项目的完全灵活性。它具有镜像功能,允许在多种设备(如手机或平板电脑)上测试您的网页设计模板,可以100%确定您的网页设计将如何在不同的屏幕尺寸上显示。
3、Figma
4、Adobe Illustrator
Adobe Illustrator 提供了一个完美的像素级设计环境,您可以在其中创建灵活且流畅的 Web 元素。它为您提供了创建清爽利落的 Web 布局所需的一切,包括矢量图形、响应式媒体图标、可伸缩组件、CSS 生成、SVG 导出、线框以及可重复使用的符号。
Adobe Illustrator
5、Adobe XD
adobe家打造的一款集页面设计和交互原型为一体的设计工具,支持多人在线实时协作功能。另外在兼容性上优势最大,能跟全家桶产品进行联动;但是在资源和功能这两方面相对于前面两款就比较弱势了。
6、Canva
Canva是一款免费的设计工具。它不能被认为是一个成熟的网页设计软件,但你可以使用Canva创建有趣和有吸引力的设计来支持你的网页模板。它非常适合构建可以添加到Web设计中的图像。
它配备了数百个模板,使您的工作更轻松。如果您没有任何设计技能,可以使用Canva中的模板,轻松地为您的Web模板构建具有专业外观的图像。
优化猩SEO:手机用户已超过PC用户,企业都很重视手机界面设计,对手机UI界面的视觉设计,需要满足手机UI设计的交互性功能视觉需求,以达到较好的界面视觉设计效果,充分发挥手机界面设计及其交互性功能实现的重要作用。
参考链接:
手机界面设计_百度百科
手机UI设计_百度百科