有朋友建议我偶尔写写技术类的文章,所以我打算开始穿插性的写一些偏技术方面的科普文章,尽量往小白能看懂的方向写,今天我来讲讲UI设计中的48dp定律. 那么先说说什么是dp ?其实对于一个非技术人员要把这个概念完全搞清楚还挺复杂的,所以我们就知道他是干什么用的就好,因为安卓阵营的碎片化,所以会有杂七杂八的不同分辨率的屏幕,但是一个UI人员不可能对不同分辨率把应用的图片都切一遍吧?所以就用dp这个单位,用这个玩意儿可以保证同一个图片在不同分辨率下的屏幕上保持基本相同的物理大小. 说了dp,就得说说p…

英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# ------------------------------------------------------------------------------------- 又是一篇来自Tubik Studio 的文章,丰富的设计项目经验使得这家资深设计机构对于设计的每一个细节都有着独特而系统的见解.今天的文章聊的就是深色系背景在设计中的运用…

UI设计中px.pt.ppi.dpi.dp.sp之间的关系 武汉AAA数字艺术教育 2015-07-24 14:19:50 职业教育 pi px 阅读(3398) 评论(0) 声明:本文由入驻搜狐公众平台的作者撰写,除搜狐官方账号外,观点仅代表作者本人,不代表搜狐立场.举报 做了几个移动端的项目之后,深感UI设计移动端尺寸换算的必要性,在此做个总结. 先介绍下各自的定义: px: pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元 pt: point,点,印刷行业常用单位,等于1/72英…

shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和selector在美化控件中的作用是至关重要的. 1.Shape 简介 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xml 使用的方法: Java代码中:R.drawable.文件的名称 XML中:android:background="@drawable/文件的名称&…

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师.随着扁平化设计和Material Design 的日益普及,色彩理论知识的重要性也变得愈加明显! 在许多数字化产品的界面中我们都能看到一些明亮的色彩和渐变色,从趣味性和娱乐性APP到商业APP和网站.然而,关于明亮的色彩对用户体验的影响仍有很多争议.本文就UI 中使用亮色的优缺点进行了一些分析和总结.   一.在UI中使用鲜艳颜…

我给博客改了主题色,从 这样的 改成了 这样的:然而我问小伙伴看看效果他却并没有发现改变. 红绿色盲在亚洲人中占比,男性约 5%,女性则小得多.也就是说,就算仅考虑为国内用户开发应用,这也是很大的一部分用户了. 本文将通过更加了解色盲(Color Blindness)来指导我们为更多用户提供更好的 UI 设计. 没有色盲模拟器 大多数想理解色盲眼中世界的人可能会考虑“色盲模拟器”.在网上搜索“色盲模拟器”,或者英文的“color blindness simulator”可以得到很多的模拟工具,大…

UI设计中蕴涵着系统重要的数据结构与功能设计 UI设计中的用户需求,事件(用例)驱动…

暖色调的颜色属于前进色.膨胀色可以使物体的视觉效果变大,而收缩色可以使物体的视觉效果变小.   颜色的另外一种效果.有的颜色看起来向上凸出,而有的颜色看起来向下凹陷,其中显得凸出的颜色被称为前进色,而显得凹陷的颜色被称为后退色.前进色包括红色.橙色和黄色等暖色,主要为高彩度的颜色:而后退色则包括蓝色和蓝紫色等冷色,主要为低彩度的颜色.   前进色和后退色的色彩效果在众多领域得到了广泛应用.例如,广告牌就大多使用红色.橙色和黄色等前进色,这是因为这些颜色不仅醒目,而且有凸出的效果,从远处就能看到.…

简评: 渐变是通过两种或多种不同的色彩来绘制一个元素,同时在颜色的交界处进行衰减变化的一种设计.从拟物到扁平再到渐变,人们慢慢发现它能创造出从未有过的一种色彩感觉 -- 独特.现代和清爽.(本文译者@Aceyclee) 很长一段时间以来,设计界都不怎么待见「渐变」,这还得拜 90 年代的 PowerPoint 所赐,毕竟那时候的渐变是这样的: 然而时过境迁,今天你打开 Dribbble 或者 Behance,可能会看到不少使用渐变的设计.本文将会分享如何在设计中使用「渐变」的实用技巧. ▎为什么…

最近挺想学学UI的,因为我们公司没有UI,所以做页面都是全靠摸索,老是被领导说没有审美[捂脸] 学习UI所需要的软件 PS  AI Sketch XD Sketch是MAC才能安装的软件 作者:彼岸舞 时间:2020\05\16 内容关于:UI设计 本文部分来源于网络,只做技术分享,一概不负任何责任…

2012年移动应用的下载量超过300 亿,可是智能手机用户平均每周会使用的应用数却大概只有15个.更糟的是,Localytics 的研究表明,大概有22%的应用是见光死,用过一次之后就被束之高阁.既然移动领域方面投入了那么多的时间和精力,为什么参与度还那么的低? 这其中的原因肯定是很复杂的,但是应用开发过程中存在着一些屡见屡犯的错误是原因之一. 这些应用是做什么用的你能猜出来吗? 误区1:尚未显示价值就强制注册 在没有证明自己可以给用户带来什么好处之前,就要求对方注册或捆绑社交网络,这么做只会吓…

Axure RP是一个专业的快速原型设计工具.让负责定义需求和规格.设计功能和界面的人员能够快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档. 作为专业的原型设计工具,它能快速.高效的创建原型,同时支持多人协作设计和版本控制管理  . 首先为大家介绍下Axure 的工作界面: 1-主菜单工具栏:大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示. 2-主操作界面:绘制产品原型的操作区域,所有的用到的元件都拖到该区域. 3-站点地图:所有页面文件都存放在这个位置…

低保真一般用Axure Rp产出,高保真分两种,带交互的或不带交互的.不带交互的高保真直接根据低保真用PS产出即可.带交互的,需要 PS产出后,再切图,再使用Axure RP与低保真结合产出高保真. 参与人员包括领导(需求提出方).产品经理(需求细化方).产品设计师(低保真以及交互设计方).UI(高保真制作方),开发不算直接参与到这个流程中,在需求细化方面就已经会和开发讨论过. Step 1:领导提出需求Step 2:产品经理把需求细化,Feature List后,模块化并整理完毕,再交与领导讨…

1.二级ListView自定义布局ExpandableListView http://pan.baidu.com/s/1mhlJh12 密码:nhc2 2.ListView实现各种动画效果ListViewAnimations 实现各种列表动画效果.包括卡片式列表(效果图1),Grid View列表(效果图2),列表item逐个淡入显示(效果图3),拖动列表item重新排序(效果图4),滑动删除列表item(效果图5),批量删除列表item(效果图6),展开列表item(效果图7)等等.     …

在我们设计APP.设计前端页面时,免不了要和各种文字大小打交道.字体的大小有多种单位,不明究里的话使用起来很容易出问题.今天整理了这方面的东西做了个图片,方便查看. 图上的资料来自互联网,感谢大家的负出. http://www.cnblogs.com/yangyxd/articles/4803389.html#3265528…

xib支持图形化操作,提供了几乎所有的控件可供选择,只需拖动到相应的位置即可,但是控件的后台代码仍然需要手动编写,一定程度上加速了前台的开发. xib快速开发程序,手写代码速度比较慢 xib适合做静态页面,代码适合动态复杂的页面 xib不适合svn/git代码管理,代码比较适合 xib不适合后期维护,代码适合长期维护 如果xib文件名与类所在的文件夹名相同,可以直接使用init方法,自动查找同名的xib资源文件 UISwitch 开关 设置显示时的开关状态 [mySwitch setOn:YES…

最近在开发项目,针对小程序前端,显示文本需要添加下划线问题,起初是通过border-bottom:1rpx solid #eee; 进行编写,但是总是觉得线的高度过于粗,移动端最小单位值是 1  即:1rpx 1px,高度设置0.3是不生效的,后面看到相关博客通过 scale进行划线,在这记录下: <div class="line-bottom"> zty </div> .line-bottom{ position:relative; } .line-botto…

以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众群体.但是,当项目过大时,开发人员往往无法遵循最佳UI设计的原则进行开发.从而导致网站中某些重要功能无效或者浏览器测试不能完全通过.所以,今天咱们讨论的话题就是导致网站UI设计失败的原因以及如何避免这些错误的UI设计技巧,总结出来有17个.我们一起来看看吧! 1. 避免刻意销售 用户体验的最新趋势是…

最近一直在追<延禧攻略>,女主魏璎珞敢爱敢恨,有仇必报的性格吸引不少人,她从低贱的秀坊小宫女步步为营,最终成为皇帝最宠爱的令妃呼风唤雨.尔虞我诈的后宫,想要打怪升级光有颜值是万万不够的,更重要的是有胆识和谋略. 其实在工作生活中,想要做好一件事,想要从青铜到王者,想要成为一个佼佼者,也是需要一层层晋升,在不同阶段做好该做的事情,提升自己的能力,才能攀上高峰,看到不一样的风景. 成为优秀的UI设计师也和宫斗剧一样,想要层层晋升,从“宫女”变“宠妃”,这5个阶段的心路历程是一定会经历的,来看看,在…

设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日常用到的很基本的技巧,对于新手UI设计师建议一看,注意案例中「对」与「错」不是绝对的,仅用于参考作用.  1.图标保持统一性 图标是UI设计里非常重要的模块之一,最重要的一点是要保持风格统一.如果是填充型的图标,那么一套设计里不要出现线性的图标设计.其次就是描边大小的统一,定下了3px就要全套保持即…

一.PPI 1.像素密度PPI:PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目. 根据勾股定理(直角三角形两边为a和b,斜边为c,那么 a²+b²=c²),可以得知iPhone4(s)的PPI计算公式为:  = 329.65 和标准的326 稍有出入,这是因为像素的离散采样有锯齿效应. 2.iPhone5屏幕尺寸为4英寸.iPhone6屏幕尺寸为4.7英寸,屏幕尺寸 指的是显示 屏幕 对角线的长度. 单位换算:   1 inc…

UI设计模型是可重用的界面设计解决方案,可以让开发人员少走弯路,节约不少开发时间.下面慧都小编跟大家分享6个很有用的UI设计模型资源,希望对你有用: 1.UI Patterns 由一个丹麦人开发的UI模型库,这个网站不仅有很多漂亮的设计实例,还提供对UI设计中已解决问题的归纳总结,非常清晰. 2.Quince 是由著名界面控件开发商Infragistics发起的UI资源库,功能非常强大.Quince是一个社区驱动型的模型,它鼓励UI设计师和开发人员相互合作.交流并共同促进Quince的不断发展.…

第一步:认识设计启蒙必备知识 学习一项技能,尤其是已经有一定沉淀并在各行各业有广泛应用的技能,就一定要对它先有充分的认知.在开始正式学习前,你需要花足够的经历去了解和查阅它的起源.发展.应用.未来. UI作为平面设计的一部分,再往上又从属与美术学这一大类.因此,首先要先去了解整个美术史的发展.从人类起源各个阶段中,美术经历了什么样的变化,在各自的时代发挥了什么作用,近代美术史又经历了哪些波折,平面设计艺术是如何发展壮大走进千家万户,并且有哪些经验成功过度到后来的UI设计中.那些享誉中外的艺术大师…

阅读体验是ui设计中必不可少的一项,良好的设计应该都是可读的设计,如果信息都无法正常而清晰的传达,那么设计就失去了意义.设计的可读性和排版设计息息相关,这也就跟设计师的设计功底息息相关.下面简单介绍文字影响UI界面阅读性的几种情况. 文字大小 文字的大小无论在ui界面或者网页当中任何一个地方,都起到一定的作用.而文字作为设计的一个组成部分,阅读性就必须得到保证.那么,如何去选择字体的大小能达到比较好的效果呢? 在网页中,我们常见的文字大小一般是14px.16px,最小的字体一般是12px的.标题…

  UI设计,大象无形 UI设计,如同优雅的艺术品一样,优秀的UI设计也可以大象无形,大象无形的意思是有意化无意.大象化无形!就是不要显刻意,不要过分的主张,要兼容百态.无形态无框架才能容纳一切形体!最宏伟的形象就是没有形象.这个是小编对UI设计浅浅的理解,有不同意见的小伙伴欢迎讨论交流`(*∩_∩*)′! UI即User Interface(用户界面)的简称.UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单.自由…

对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap 的默认效果要强一些.这个时候很多人会退缩:“我并不是一个艺术家,我没法作出更好的效果!”但是事实证明,想要设计出更优秀的效果,合理地运用技巧其实更重要,而且是可以出效果的. 今天的文章,我们总结了7个简单直观的改善网页视觉效果且能提升高级感的小技巧.很实际,也很实用,希望你们能喜欢. 1.使用色彩…

对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap 的默认效果要强一些.这个时候很多人会退缩:“我并不是一个艺术家,我没法作出更好的效果!”但是事实证明,想要设计出更优秀的效果,合理地运用技巧其实更重要,而且是可以出效果的. 今天的文章,我们总结了7个简单直观的改善网页视觉效果且能提升高级感的小技巧.很实际,也很实用,希望你们能喜欢. 1.使用色彩…

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 在实际的Web或App界面设计中,设计师们在学习和实践各种专业知识和技能之外,也会不可避免的遇到到各种设计术语.在前面的文章中, 我们已经针对网页设计可用性,相关业务术语和缩写,页面导航元素以及色彩术语进行了分析和讲解.而本篇文章将延续心理学在用户体验设计方面的影响的主题, 解析新的UX设计术语 —— UI设计的可供性(即那些能够帮助用户轻松实现人机交互的隐藏提示). 什么是界面设计的可供性? 一…

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 之前小编已经和大家讨论了2018年软件测试的五大趋势,现在让我们一起来看看移动UI设计在2018年会有些什么变化吧!首先,一些过时的设计方法会逐渐被淘汰,而另一些新的设计趋势则会继续占据主导地位.毫无疑问,我们也将在2018年迎来新的UI设计趋势的划分.所以,赶紧跟着小编一起看看2018年UI设计有哪些最新趋势吧! 2018年3大移动用户界面趋势 UI这个充满新奇的世界从未停止过它不断发展和演变的…

纵观整个设计的历史可以发现,设计的历史演变都无一例外都是从复杂的装饰性设计逐步的演化为更加注重功能性的简洁化设计.并且设计师们还在不停的试图通过各种设计语言的创新追求极至设计的可能性.设计潮流变更的核心动力是对效率和美感的极致追求,简洁设计将继续引领未来的设计潮流.那我们看下以下的十个流行趋势 艳丽色彩的使用 在扁平化设计主导ui设计风格的大环境下,设计师们不断地探索即可以保持设计扁平简洁有能有所突破的设计元素.为了弥补扁平化设计过于单调的问题,在UI设计中大量采用更加艳丽的色彩来作为调和. 除…