童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

系列一款APP设计的从0到1:界面设计篇

6月22日 断龙塔投稿
  《一款APP设计的从0到1》这是一篇系列文章干货,上次U妹讲的是关于APP项目立项和预估时间篇,今天U妹来说一下,APP界面设计和iPad界面设计规范。
  这次U妹接着上次的茬继续,继续之前先来看看整个目录(满满的干货)
  U妹列了一个小小的目录:
  一、项目立项(点击查看)
  二、项目预估时间(点击查看)
  三、界面设计
  四、切图标注
  五、视觉还原
  六、上线准备
  界面设计篇
  我是一名UI设计师,所以U妹这里说的都是从设计师的角度去阐述一款APP从无到有的一个过程中,设计师应该干的事。
  目前在行业里,关于APP界面设计规范也是层次不齐,很多都还停留在6的设备和ios9的系统之上,而现在最新的是iphone7和iOS10了(更新换代真的很快),我这里说的是最新的iOS界面设计规范(Android设计规范,我们下次见)
  一、关于设计工具
  俗话说:工欲善其事必先利其器,好的工具可以让我们的工作效率更高,做界面设计我们用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度也就更快。
  我个人刚接触ps是从8。0开始,8。0CS4CS5CS6CCCC2014CC2015,一直到现在的最新的CC2017,深刻体会,新的版本更好用。也可以根据个人习惯,选择自己顺手的工具就好。
  二、设计稿尺寸
  在看设计稿尺寸之前,我们先来了解一下APP界面设计构成:
  界面构成由:布局层、图文排版层和图标层。
  在iPhone6还没出的时候,都是用6401136px来做设计稿的,自从6的发布,所有的设计稿尺寸以7501334px来做设计稿尺寸
  U妹再带大家来看看,到目前为止所有iPhone的尺寸(13代就不用考虑了):
  iPhone界面设计规范:
  iPhone界面尺寸:
  以750x1334px作为设计稿标准尺寸的原由:
  从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。
  大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。
  设计安卓版本时只需做最小的设计调整,提升设计效率。
  所以做设计稿事请以750x1334px来做设计稿
  在文档建立参考线是一个很好的习惯,我希望大家也可以养成这个习惯,上下很容易设置,左右我习惯设置24px的距离,我通过对国内外很多APP就行了对比,总结是24px更合理,这个是我的个人习惯,所以也不要当做是明文规则,你设置为30px,也是可以的。
  然后就可以开始你的设计了
  这里U妹再给大家略过一下iPad的设计规范:
  三、图标设计
  iPhone图标尺寸:
  图标设计请用栅格化系统进行设计
  设计尺寸:1024x1024px,竟可能的采用黄金比例设计
  四、关于设计字体
  先来看一下字体的历史演变过程
  iOS9:英文字体为HelveticaNeue
  iOS9:中文字体由为冬青黑
  iOS10:英文字体为SanFrancisco
  iOS10:中文字体为苹方
  关于字体大小的问题:
  顶部操作栏文字大小3438px
  标题文字大小2834px
  正文文字大小2630px
  辅助性文字大小2024px
  Tabbar文字大小20px
  文字大小只是一个范围,这要根据设计的视觉效果来决定,不要死记硬背,但是切记,字体大小要用偶数。
  关于界面设计就说到这里了,好的工作方法才能让自己事半功倍,你觉得对自己有帮助,那可以借鉴学习我的方法,在具体工作中也要灵活应用,有不足之处或问题也可给U妹留言,下期U妹带你一起来看看界面切图标注,我们下期再见!
  相关阅读
  系列一款APP设计的从0到1:项目立项篇
  系列一款APP设计的从0到1:项目预估时间篇
投诉 评论 转载

网页设计:视差特效的5种运用技巧在视差特效的具体运用过程中,有一些技巧和注意事项是不容错过的,今天的文章总结了视差特效的5种运用技巧。enjoy视差特效是目前最流行的网页设计趋势之一。在这个滚动动画特效……系列一款APP设计的从0到1:界面设计篇《一款APP设计的从0到1》这是一篇系列文章干货,上次U妹讲的是关于APP项目立项和预估时间篇,今天U妹来说一下,APP界面设计和iPad界面设计规范。这次U妹接着上次的……系列一款APP设计的从0到1:上线准备篇《一款APP设计的从0到1》这是一篇系列文章干货,上次U妹讲的是关于视觉还原篇,今天是系列的最后一篇文章,U妹来说一下上线准备篇。这次U妹接着上次的茬,继续之前先来看看整……经验分享:像素、分辨率和适配的总结本文是作者对像素,分辨率和适配做的一个总结,enjoy不管是UI还是交互都是属于从国外传进来的“舶来品”,在翻译成中文的时候可能会出现一些词不达意的错误。在传播过程中,这……系列一款APP设计的从0到1:项目预估时间篇《一款APP设计的从0到1》这是一篇系列文章干货,上次U妹讲的是关于APP项目立项篇,今天U妹来说一下,APP项目预估时间和网页项目预估时间。上期回顾:《一款APP设计的……系列一款APP设计的从0到1:项目立项篇很多时候,我们都忙碌在每天的撸图和改稿中,很少的去整理归纳结和思考工作的一些问题和方法,善于总结反思才能达到事半功倍的效果。今天U妹在这里将自己在设计中的一些经验和技巧分享给小……交互思考:浅析iPhoneX移动端网页导航上的存在问题编者按:iPhoneX发布之后,全新的屏幕和为之适配的iOS系统,为我们呈现出全新的交互。之前我们习惯了的交互,在这块带着刘海的屏幕上,不再完全相同,之前恰到好处的设计,在这块……怎么写UX文案?跟着谷歌学学都是写一句话,人和人(机器)的差别这么大?写作是很容易的,你要做的就是删掉那些错误词句。马克吐温这篇文章是我从GoogleIO2017大会中记录的一些笔记,你可以从……一个专业的网站设计应具备的9种特征越来越多的网站和博客已经走上专业化的道路了,从运营到整体的设计均是如此。为了寻求给人以专业性的视觉和体验,有一部分网站会采用数字杂志式的设计。和所有的类型化设计一样,数字杂志式……以人为中心的设计:来自用户体验先驱者唐诺曼(DonNorma我鼓励设计师们做的最主要的事情就是做一个伟大的观察者,出去看看真正的人。不要假设你知道事情是怎么运作的,或者人们是怎么做的。唐诺曼是用户体验设计的传奇人物。自上世纪60年……一款APP设计的从0到1:视觉还原篇《一款APP设计的从0到1》这是一篇系列文章干货,上次U妹讲的是关于切图标注篇,今天U妹来说一下,视觉还原。这次U妹接着上次的茬继续,继续之前先来看看整个目录(满满的干货……系列一款APP设计的从0到1:切图标注篇《一款APP设计的从0到1》这是一篇系列文章干货,上次U妹讲的是关于APP项目立项、预估时间和界面设计篇,今天U妹来说一下,界面切图标注。这次U妹接着上次的茬继续,继续之……
语音交互设计(一):VUI发展及特征谷歌所说的“整体网页设计”到底是什么概念?移动交互设计:提示语总结对新版淘宝的设计思考五步打造APP节日主题设计:以Lofter新年图标设计为例一个全新的UI设计实战:帮你改善睡眠的APP,是这样设计出来设计沉思录如何高效完成表单输入?从交互角度分析:为什么我沉迷抖音,却不想刷微视?腾讯微云为空页设计:体验创新设计3大纬度剖析网页设计:7种文字排版设计趋势,2018年正在流行3种权限模型,快速定位设计目标好的搜索体验,就是好的用户体验

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界