制作UI设计规范时,你遇到的最大瓶颈是什么?
3月15日 醉殇别投稿 上一篇文章是给大家提供一个制作UI设计规范的大体思路,这一篇准备来聊聊我们在具体执行过程中遇到的最大问题、瓶颈是什么!
此篇文章适读人群:想进阶的初级UI设计师、有追求的初级交互设计师。
发现问题
前期做规范的过程是十分痛苦的,每做一个板块都要花很多时间去思考怎么表达、展示才能让其他设计师和程序员都一目了,然而随着内容的增加,发现很多地方无法深入的执行下去,只能含糊其辞,给我们制作规范的人员带来了很大苦恼。
为什么有如此大的执行阻碍呢?带着问题我们找到团队的一位设计前辈请教了一番,在前辈的指点下,终于发现了问题所在:我们对于前端如何实现设计稿其实并没有很好的了解。
解决问题
大家要明白,如果你没有彻底了解你做的界面,那么做规范就会十分艰难,因为你只是做了表层的视觉设计,换句话来说就是你根本不明白界面是怎么用代码实现出来的。我就是因为遇到了这样的问题,所以在做规范的时候,经常无从下手。
了解原因之后,我们决定如果后期再发生执行困难的情况,我们就会向设计前辈或者前端程序员咨询一些简单的实现方法,慢慢了解他们的思维模式,让设计执行变得越来越顺畅。
举个实例
其实遇到困惑的地方还是蛮多的,这里就拿二级导航来举例,希望大家能举一反三,多多思考与实践。
图11是XX项目的所有关于二级导航的样式,因为这一块的界面不是我做的(都是借口),所以规范不太了解,导致在做整个项目的规范时,遇到了极大的阻碍。
最初看这几个二级导航时,我的第一感觉是4个样式遵循相同规则:整条导航栏平均N等分后,文字在每个等分区域内居中,但是仔细查看间距后发现只有2、3的样式遵循这样的规律,1和4并不遵循,那1和4的样式到底是什么呢?
导航1,如下图
标明颜色后,我们可以清晰看出,原来这个导航是平均分成了3等分(红绿蓝),只不过将绿色分割成两半放在左右两边,这样我们就可以根据整条导航的长度计算出每块区域的长度,不论是开发还是设计师都可以一目了然并且明白其中的设计规则。
导航4,如下图
首先我们先来认识一个单词:auto(自动的意思),就是指数值可以变化、不固定。
再来看这个导航样式,在程序员眼中这个导航其实是由两个容器组成的,一个容器是:绿色区域红色区域蓝色区域,另一个容器是:黄色区域(不可滑动,大小固定)。
而第一个容器内的绿色和蓝色部分(间距)也是固定的,所以只有红色区域是可变化的,因为红色区域的文字个数是可以变化的,我们只要给出字体大小即可。
所以对于导航4的规范,我们要给出绿色、蓝色、黄色区域的宽度;文字(选中、未选中)的大小及颜色;黄色区域内图标的大小、间距以及滑动规则就基本可以高度还原出视觉稿的样式了。
了解了这些前端知识之后,我们发现再次制做二级导航的规范时,过程顺畅很多。
心得
先来总结一下当设计师拥有一定开发思维后的好处有哪些?
减少与开发哥哥不必要的沟通,推进工作的顺利进行。
对于设计师自身管理设计文件、规范化作图、规范的制定、页面标注都有极大的帮助。
避免设计很多无法落地的设计方案,省时省力,提高工作效率。
任何事情都有其内在的套路与规律,我们必须要了解事物的本质,才能帮助我们更好的执行;所有的苦恼与迷茫都是源自你对事物的理解不够透彻,所以让我们从现在开始,锻炼透过事物看本质的思维能力,就算以后你不做设计了,这种能力也可以伴随着你,让你受益终身!
投诉 评论 用这3个方法,让你像用户体验设计师一样思考只要保持好奇心、同理心,热衷于研究身边的世界,像用户体验设计师一样思考,其实很容易。培养探索未知的心态(持续)学习用户体验是最需要技巧的事情。因为这不是标准教育中的……
版式设计中的小细节有大讲究,这些你都知道吗?设计圈里一直盛传这样一句话:“设计细节决定设计品质”。笔者从事UI设计8年很认同这句话!今天就带各位小主扒一扒版式设计中的那些有大讲究的小细节。元素层级关系我们来看……
设计一个界面动效时,需要明确价值、遵循原则和实现交付坦白来说,虽然我之前在项目里做过一些小动效尝试,但一直没有什么系统的方法和原则指导,大多在原型软件里凭感觉随意调调了事,而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们……
跟着电台动起来:如何设计跑步的垂直场景没想到吧,你竟然可以通过企鹅FM来跑步?为什么在电台App要深度挖掘一个运动场景,交互设计师又是如何将痛点和需求转化为市场蓝海,在设计的过程中怎样将场景垂直的特色表现出来关于这……
实例分析:关于上传照片交互逻辑的思考最近在重新设计公司APP上传照片的组件,研究了很多移动端上传照片的组件,下面来简单单谈谈自己的总结。照片选择通常分为四个步骤“查找图片、选择图片、编辑图片、上传图片”,下……
优秀的UIUX设计师需要具备哪些技能?互联网时代,企业对设计的要求越来越高,也越来越多样,那么成为一名优秀的设计师应该具备哪些技能呢?设计可以是一款产品,一个网站,也可以是一个品牌门面。因此,无论在任何时代及……
UI风水学:你该知道的9个UI设计门道好风水称之“顺”,其中一元叫气,精气气场在于风水之中:“气遇风则走,遇水则停。”讲究个气顺心畅;好交互称之“理”,其中一元叫情,情感情怀在于场景之中:“情遇杂则乱,遇简则……
未来的汽车用户界面将会让人惊叹如果有一天让你来设计汽车?未来的汽车会是什么样的呢?当今我们在市面上见到的汽车大部分都有着过时的,没有吸引力的用户界面。在其它行业都飞速提升设计质量的年代里,汽车行业却一……
语言的图形化表达,让百度“中文搜索”的设计更美本次百度ACL会议主视觉设计主要进行了五个核心技术领域的海报设计以及物料设计。通过把甲骨文的象形文字表意特征结合现代设计语言,创造出最能代表百度“中文搜索”特质的作品,提升了公……
商业产品的四大设计策略我们仍然需要在很多地方持续帮助用户有效监控商业产品的使用效果,为商业生态中的用户打造更高质的用户体验。从而提升商业产品的信任度,以达到商业产品的可持续性发展。这是商业设计师们内……
制作UI设计规范时,你遇到的最大瓶颈是什么?上一篇文章是给大家提供一个制作UI设计规范的大体思路,这一篇准备来聊聊我们在具体执行过程中遇到的最大问题、瓶颈是什么!此篇文章适读人群:想进阶的初级UI设计师、有追求的初……
5个实用配图技巧,为产品带来优质体验图片不仅仅是装饰,更是强大的设计工具,可以帮你进行视觉传达,让你的产品脱颖而出。俗话说一图胜千言,在这个读图远胜过读文字的时代,图片的视觉化属性更值得挖掘。用户只需要几秒……
AxureRP官方教程翻译(2):文本链接文章分享了给部件中的部分文字添加链接的实现过程,具体来看看这篇教程要达到的目的是为了一个部件中部分文字添加链接,在该案例中我将其打开方式修改成“PopupWindow”,……
AxureRP官方教程翻译(1):交互式按钮文章主要介绍了利用Axure制作交互式按钮的具体操作过程,希望给大家带来些帮助。用MouseOver(鼠标悬停),MoverDown(鼠标按下),Selected(选中)……
Axure中继器应用实例:如何设计商品信息列表?文章通过设计商品信息列表的实例,简单介绍了中继器的使用方法,一起来学下。一、概念解析Axure部件Repeater,一直觉得这个单词用的很形象,是使一条条数据在页面……
AxureRP官方教程翻译(4818)集合鉴于有时候篇幅短小,所以这次一次性整合了5篇上来,原教程共有18篇,已经到第8篇了!这里十分感谢已经给我打赏和将来要给我打赏(笑脸)的朋友,这确实让我有种意外的喜悦,之前……
Axure教程:星级评分功能设计我们知道很多网站、APP等的评价系统都有按星级评分的功能,大部分是5个星级,依次代表15分。且不论这些系统背后的复杂逻辑,单纯从用户打分的角度来讲,似乎是一个非常简单的功能,用……
如何正确的画出功能逻辑图?当我们需要设计任务型功能的时候,除了基础的线框图和交互,更需要提前搞清楚整个功能的内部逻辑流程,简称功能逻辑图。举几个大家熟悉的任务型功能作为例子,方便大家理解概念。……
Axure交互原型设计:动态面板之弹出对话框动态面板的功能很强大,了解了动态面板的原理,便可以运用自如。在目前的工作中,我把经常使用动态面板制作的交互总结了一下,希望与大家讨论并分享。动态面板在交互中常常用在:……
Axure炫技:如何让你的原型图动起来前不久我进入一家创业型公司,我开始发现,老板不看xxx。Html原型图的,老板只看视频版本的原型图,而给开发人员的原型图就是xxx。Html的,所以每次做原型的时候我都会做两套……
如何利用局域网实现产品需求目录管理?作者分享了一篇局域网产品需求目录管理的工具rp,供产品的同行使用,仅作参考,有做的不好的地方,可以自行改进。之前分享过一篇局域网分享axure原型的文章:《【winmac……
如何挑选一款高效的原型工具?客观来讲,每种工具能满足的任务和需求各有不同,“最适合”才是原型工具选择的黄金法则。每当设计一个新的App或网站时,作为对原型设计有一定了解的人来说,我们会倾向于选择那些……
如何正确的画出功能结构图?简单的功能直接画l线框图。但是复杂的功能怎么办呢?文章为你解读。通常PM梳理完了产品的整体架构,就进入正式的原型设计。简单的功能直接画l线框图。但是复杂的功能怎么办呢?……
Axure交互原型设计:动态面板之tab页面切换动态面板的功能很强大,了解了动态面板的原理,便可以运用自如。在目前的工作中,我把经常使用动态面板制作的交互总结了一下,希望与大家讨论并分享。动态面板在交互中常常用在:……