APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 嗡嗡(iwengweng.cn) 整理. 1.2 读者对象 项目实施工作组UI/UE设计人员. 2.色值规范 系统采用统一色彩标注值,超出的需要进行登记管理. 色彩范围值:以通用字号C开头标识,在Android开发中对应相应的配置文件 参考:Android开发设计规范 2.1 屏幕适配 Androi…

图文并茂,浅显易懂. 使用markman标注. 资源链接: 图片来自http://www.ui.cn/detail/56347.html 本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4708591.html有问题欢迎与我讨论,共同进步.…

现如今,智能手机已成为人们生活中不可或缺的一个物件,琳琅满目的手机APP充斥着各大应用市场.对于普通人来说,他们的衣食住行因此而变得简单方便:对设计师们来说,他们则面临更多的机遇和挑战.每位设计师都梦想着做出最出色的应用界面(UI)设计,最符合用户习惯的UX设计. 而出色的手机界面设计应该具备两个特点:简洁,易用.这也是每个设计师的职责.简洁美观的界面设计可以很好的引导用户,从而带来更优质的用户体验.相反而言,如果用户在使用时完全没有这个概念或是摸不着头脑,这对UI设计来说就非常失败了. 为广大…

前言:公司在前端组和视觉组交接设计稿切图的时候,总会因为视觉组同事们对前端的实现原理不清楚而出现各种问题,在用的时候还得再次返工,前端组同事们一致觉得应该出一份<设计稿切图通用性标准文件>,这里是我结合资料做出的一份总结. 1.切图资源尺寸必须为双数 2.LOGO类图片以方形切图输出    3.可点击部件要把相关状态都切图输出,比如正常状态.点击状态    4.同一类型图片保持同样大小尺寸输出切图 全屏切图类: 局部切图类: 空白页提示案例图:    5.有阴影背景的内容显示区域保持居中输出切…

身为一个android开发狗,真是艰辛啊,适配不好做,Rom特性不好搞,连切图有时候都得自己上啊,设计师MM都不敢去惹呢,新技能Get开始. 其实,都是小case了,我有度娘和谷哥! 因为,有了psd,只要设计的是按android标准,那都好说,有标注切图二合一免费神器pxcook: 教程在此:http://www.fancynode.com.cn/pxcook/tutorial 嗯,应该比以前的 Cut&Slice me 切图神器(PhotoShop强力割图插件)强大一些的. 说到标准,看一下…

安卓app设计规范整理和Android APP设计篇 http://www.25xt.com/appdesign/6536.html APP UI面试题:iOS和安卓的ui设计有什么区别 http://www.25xt.com/appdesign/9839.html 移动APP设计入门文档:iOS8和Android设计规范 http://www.25xt.com/appdesign/7187.html http://www.shejidaren.com/examples/tools/chichu…

一.基本原则         1.用户体验原则UCD,以用户为中心去设计         2.设计模式是可重用的设计规范实现         3.反模式是糟糕设计的典型,极力避免使用         4.试验模式--超越既有理念和移动现状的设计,有望成为下一个主流UI设计模式. 二.主要内容         1.APP UI 设计模式描写叙述的对象是智能手机.平板.智能设备等设备上执行的应用程序.         2.设备多样性-->设计多样性         3.设备类型定义:        …

首先,笔者是站立在开发者的角度来看UI设计的,欢迎专业人士提供指导,不多说,来看怎么把UI设计和开发高效结合起来~ 一.约定APP开发中的一些规则 1.大部分图标满足HDPI(高清)即可,比如:大众点评首页的右上角图标,尺寸大致在48*48px左右 2.一般提供1280*720px的尺寸即可,最常见的适配模式 3.还有种图标,很多界面复用且图标中等偏大(80px及以上左右),他们在常规手机.平板,小尺寸手机上面需要适配,所以需要多种尺寸的图标,如:微信底部的tab菜单图标,一般设计的尺寸要3套,…

http://www.cocoachina.com/design/20150703/12029.html 作者:bone9 善心悦目的动效已然成为一个app的必备,作为设计师自然要跟随趋势学习.APP中的动效可以划分为两类,一类是转场动效,应用在页面的切换,加载等,这类动效可以柔和页面的过度效果,增加切换.加载.等待过程的趣味性.另一类是反馈提醒,通过界面内元素的动效,增强用户的交互感知或引导用户完成任务. 动效充满了设计师体验的想象,作为一个设计师,不管你的逼格下限在哪里,一个有趣有爱充满个性…

原文:http://android.eoe.cn/topic/summary 许多开发者会在多个平台上发布应用.如果您打算为 Android 开发应用,请记住在不同的平台需要遵守不同的要求和惯例.在某个平台上开起来不错的设计,也许在另一个平台上就不合适.“一次设计,到处运行”的想法可能在一开始能节省一些时间,但是和平台不一致的体验最终可能会疏远用户.考虑按照下面的指导进行设计,避免常见的错误和缺陷. 记住您的应用会运行在各种不同屏幕尺寸的设备上.通过“面板”使您的应用在各种设备上始终能够提供平衡…

UIImageView本身是没有frame的,所以UIImageView不用设置frame,UIImageView的fram由它内部的图片决定,所以当要更改UIImageView的大小显示的时候,更改相应的UIImageView的image就可以了,今天因为这个问题耽误了一段时间来找原因,实例:图标上的大小红点的控制.…

转自:http://www.uisdc.com/slice-rename-in-ui-design(略有修改) 关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和所有开发全盘拉通,不然一切都是空谈. 不同的团队使用的软件都不一样,如果经常使用sketch软件中Symbols 的同学,可能在命名的时候会考虑更多内容,但是照顾到还有很多同学在使用PS 作图,所以这里只介绍一种通用的命名规则,当然大家也可以根据自己的实际情况去制定,这里只提供一种方法与思路,仅供参…

正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流分享)交流和讨论的时候,发现很多新加入群的朋友们,问的最多的问题就是“主流手机界面设计尺寸做多大”?APP设计尺寸规范,知道多少呢?25学堂的老谭应广大群友的要求,特此整理最全的APP设计尺寸规范,同时也算是APP界面设计新手教程吧!欢迎大侠和高手指正! 1.苹果iOS版本的iphone APP U…

1.尺寸以及分辨率 iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只要宽度不变都好说.至于像素问题,网页和移动的UI用72px就可以了,不必纠结. 2.界面基本组成元素 iPhone的APP界面一般由状态栏.导航栏.主菜单栏和中间的内容区域组成.因为宽度是固定的,所以设计开发起来很方便.下面我们说说这些“栏”的尺寸吧: 状态栏:显示运营商.信号和电量的区域,高度 4…

移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 切片要求: 1.    设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X1334,图片资源尺寸则是2倍图尺寸,在二倍图的基础上压缩成50%,图片资源尺寸则是1倍图尺寸: 2.产品效果图独立切片,即是每张效果图独立建立一个文件夹(命名以效果图名称为准),文件夹内容包含1倍图文件.2倍图文件.                                     3倍图文件和标…

网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1.       有人说用sketch自动导出多套尺寸切图和SVG矢量格式,表示没钱买MAC 2.       有人说用切图神器cutman,表示用CC以上版本PS不支持 3.       另…不喜欢/用不惯/不会用ps自带切图工具的 目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的“降采样”(Downsampling)…

用户需求瞬息万变,而手机软件UI设计为适应变化的用户需求,也相应的发生着变化.但是,这并不意味着用户需求和UI设计趋势就是无迹可寻的.事实上,根据前几年的手机app界面设计变化的特点,尤其是2017年的变化特点,我们也是可以对2018年的设计趋势有一个基本的预测. 所以,这里为大家分析和介绍2018手机应用UI设计的9大趋势,希望对大家有所帮助: 1). 重叠空间感的延用 字体,图形以及颜色的重叠,不仅能够能够使界面设计更加独特且吸引眼球,同时也能营造出超越2维的空间感.这也是为什么近几年来,重…

​零基础学习该如何学习UI设计,没有基础该怎么开始学习呢?UI设计可以说是入行门槛很低的职业了,而且随着互联网的快速发展,UI设计的市场前景也越来也好,更多的人看到了这个高薪的行业也开始心动了,想要在UI设计道路上有一个好的发展.那么怎么样开始UI设计的学习呢?学习UI设计,那么你得先规划好你的学习路线,那么做为零基础小白如何进入UI设计行业呢? 第一种学习方法,自学也就是通过百度搜索图文教程,视频教程或买UI设计的专业书籍等方式去学习UI设计的内容.这种方法的话,好处就是不用钱,坏处就是需要太…

在下面给大家分享的移动应用程序界面设计作品中,你可以看到不同创意类型的视觉效果.如果你想获得灵感,那很有必要看看下面20个优秀用户体验的移动应用 UI 设计.想要获取更多的灵感,可以访问移动开发分类,里面有很多移动应用程序的 UI 设计,让你惊叹. 您可能感兴趣的相关文章 创意设计:折叠效果在移动App中的应用 45套新鲜出炉的精美 PSD 网页设计素材 分享15套免费的扁平化界面设计素材下载 设计前沿:30款超级精美的iOS图标欣赏 40款 iPhone 和 iPad 应用程序图标设计 Nap…

网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.PS首选项设置 编辑——>首选项——>单位与标尺,将标尺和文字的单位都改为像素. 默认"标尺"的单位是厘米,"文字"的单位是点. 2.面板 在…

我们在没有效果图的app开发中有一件事情肯定很头疼:一个按钮的调色改过来改过去,还是很难看,最终只能暂时作罢,浪费了大量的开发时间和精力.开发规范篇见Android开发怎么让自己的APP UI漂亮.大方(规范篇一) 一.APP常用搭配参考 底层背景色,内容背景色 ,两种颜色相近,但能区分标题背景色 任意花色标题文字色 通常为黑色或白色黑体内容文字 通常为黑色或白色宋体不重要的内容 浅灰色重要的内容 标题背景色附近的颜色通常比标题色亮,为强调色彩色颜色组合方式有,互补色,相似色,3角色(红.黄.蓝…

这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我们只说iOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱.1 Part 1 项目立项 文件结构 项目名称v1.0 -> 01_源文件psd 02_效果图jpg 03_标注图png 04_标注源文件 05_切片资源png 原型.rar 工具: 界面设计:PS, AI 标注:PxCo…

UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切图虽然简单,但还是有很多地方需要注意的,下面由tgideas的 LV主唱大人 跟大家讲讲原生App切图的那些事儿,对UI入门或需了解APP切图的设计师来说会有帮助哦. 如何切图? 了解iphone界面的尺寸 最小的分辨率是320×480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所…

纯干货!一款APP从设计稿到切图过程全方位揭秘   @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为…

@BAT_LCK :我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱,我整理好以后再说吧.…

本文转自:https://blog.csdn.net/klxh2009/article/details/74938009 很多UI设计师做APP切图都会有两套,一套是Android的,一套是IOS的.IOS我这边暂不作讲解,因为我本人也不是开发IOS.这里整理一下我在Android开发中总结的一些有利于本人开发的一些资源图片命名规则,并将其中有价值传播给大家. (PS:本人有时拿到UI切图,看到名称确实是不知道这个图是用来干嘛和放在哪里的,还得跑过去问UI..所以,一个好的命名规则可以让我们开发…

如何切图? 了解iphone界面的尺寸 最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x). 在实际设计过程中,为了降低设计成本,一般拿设备最高的分辨率作为设计稿的原始尺寸,拿iphone来说就是iphone5或5s的640x1136啦,当然也可以用iphone4或4s的640x960,因为宽度都是640px,他们切图的标准是一样的.显然,以1倍图的基准尺寸(宽320px)为相对的参考依据,宽640px的设计稿,以原始尺寸切出来…

在我从事UI设计师这几年的工作中逐渐发现,最让人糟心的不是应付各种奇葩的需求,完成设计稿,而是交付.每次交付的设计稿和最后开发出来的产品总是让我心塞无比,很少最终产品和我的设计稿是完全一致的. UI设计师对接产品经理是个问题,UI设计师对接前端工程师是个问题. UI设计师处于整个产品开发链条中最为重要也是最为尴尬的一环,产品界面设计完全出自设计师,但是却不是由设计师来最终实现. 根据我的经验,其实大部分问题都出在了沟通上,开发工程师没有完全理解设计稿,他们完全依赖我们的标注和切图来进行开发,设计…

目前APP设计师们对Assistor PS 可是好评连连,说是切图仔的福音或救星.确实是这样的. 与其他切图标记软件不同的是,Assistor PS 是完全独立于 PS 本身的,说是一个外挂更加合适,旨在提高切图标记的效率及速度.虽然不是一个插件,但是它与 PS 是连通的,当你在 PS 选择一个图层在后,即可使用它的功能.如果你肯花点时间下载是试用,相信不会让你失望,甚至能可能让你觉得相见恨晚. APP切图标记PS的外挂神器推荐-Assistor PS 包括mac版和window版,具体版本下载…

APP切图流程和APP切图命名规范详细完整版 http://www.25xt.com/appdesign/7339.html Marketch…