制作UI 设计规范时,你遇到的最大瓶颈是什么?

上一篇文章是给大家提供一个制作UI设计规范的大体思路,这一篇准备来聊聊我们在具体执行过程中遇到的最大问题、瓶颈是什么!
此篇文章适读人群:想进阶的初级UI设计师、有追求的初级交互设计师。


上一篇文章是给大家提供一个制作UI设计规范的大体思路,这一篇准备来聊聊我们在具体执行过程中遇到的最大问题、瓶颈是什么!

此篇文章适读人群:想进阶的初级UI设计师、有追求的初级交互设计师。

制作UI 设计规范时,你遇到的最大瓶颈是什么?

发现问题

前期做规范的过程是十分痛苦的,每做一个板块都要花很多时间去思考怎么表达、展示才能让其他设计师和程序员都一目了,然而随着内容的增加,发现很多地方无法深入的执行下去,只能含糊其辞,给我们制作规范的人员带来了很大苦恼。

为什么有如此大的执行阻碍呢?带着问题我们找到团队的一位设计前辈请教了一番,在前辈的指点下,终于发现了问题所在:我们对于前端如何实现设计稿其实并没有很好的了解。

解决问题

大家要明白,如果你没有彻底了解你做的界面,那么做规范就会十分艰难,因为你只是做了表层的视觉设计,换句话来说就是你根本不明白界面是怎么用代码实现出来的。我就是因为遇到了这样的问题,所以在做规范的时候,经常无从下手。

了解原因之后,我们决定如果后期再发生执行困难的情况,我们就会向设计前辈或者前端程序员咨询一些简单的实现方法,慢慢了解他们的思维模式,让设计执行变得越来越顺畅。

举个实例

其实遇到困惑的地方还是蛮多的,这里就拿二级导航来举例,希望大家能举一反三,多多思考与实践。

制作UI 设计规范时,你遇到的最大瓶颈是什么?

图1-1是XX项目的所有关于二级导航的样式,因为这一块的界面不是我做的(都是借口),所以规范不太了解,导致在做整个项目的规范时,遇到了极大的阻碍。

最初看这几个二级导航时,我的第一感觉是4个样式遵循相同规则:整条导航栏平均N等分后,文字在每个等分区域内居中,但是仔细查看间距后发现只有2、3的样式遵循这样的规律,1和4并不遵循,那1和4的样式到底是什么呢?

导航1,如下图

制作UI 设计规范时,你遇到的最大瓶颈是什么?

标明颜色后,我们可以清晰看出,原来这个导航是平均分成了3等分(红绿蓝),只不过将绿色分割成两半放在左右两边,这样我们就可以根据整条导航的长度计算出每块区域的长度,不论是开发还是设计师都可以一目了然并且明白其中的设计规则。

导航4,如下图

制作UI 设计规范时,你遇到的最大瓶颈是什么?

首先我们先来认识一个单词:auto(自动的意思),就是指数值可以变化、不固定。

再来看这个导航样式,在程序员眼中这个导航其实是由两个容器组成的,一个容器是:绿色区域+红色区域+蓝色区域,另一个容器是:黄色区域(不可滑动,大小固定)。

而第一个容器内的绿色和蓝色部分(间距)也是固定的,所以只有红色区域是可变化的,因为红色区域的文字个数是可以变化的,我们只要给出字体大小即可。

所以对于导航4的规范,我们要给出绿色、蓝色、黄色区域的宽度;文字(选中、未选中)的大小及颜色;黄色区域内图标的大小、间距以及滑动规则就基本可以高度还原出视觉稿的样式了。

了解了这些前端知识之后,我们发现再次制做二级导航的规范时,过程顺畅很多。

心得

先来总结一下当设计师拥有一定开发思维后的好处有哪些?

  1. 减少与开发哥哥不必要的沟通,推进工作的顺利进行。
  2. 对于设计师自身管理设计文件、规范化作图、规范的制定、页面标注都有极大的帮助。
  3. 避免设计很多无法落地的设计方案,省时省力,提高工作效率。

任何事情都有其内在的套路与规律,我们必须要了解事物的本质,才能帮助我们更好的执行;所有的苦恼与迷茫都是源自你对事物的理解不够透彻,所以让我们从现在开始,锻炼透过事物看本质的思维能力,就算以后你不做设计了,这种能力也可以伴随着你,让你受益终身!

 

作者:菜心(微信号:410628210  微信公众号:菜心设计铺),华为ITUX用户体验设计师(主视觉),3年工作经验,参与华为Welink、3MS、连长社区等多个项目的用户体验设计工作。欢迎大家互相交流关注。

本文由 @菜心 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25869/

(0)
CatherineCatherine
上一篇 2017-05-12 16:13
下一篇 2017-05-12 18:21

相关推荐

  • 不同用户体验渠道的无缝衔接

    不管在什么渠道或设备上,无缝衔接是组成可用的多渠道体验的5大关键点之一。那些能让不同渠道之间的转换体验变得简便的公司,将拥有市场竞争优势。

    2017-05-04
  • 腾讯设计通道晋升的过程

    作者:干货君@干货札记   本人有幸能有机会作为通道助理观摩了腾讯2016年上半年D族交互通道晋升的过程,受益匪浅。 注:D族通道是指“Tencent Design腾讯设计通道”,设计通道成立于2006年,隶属于腾讯职业发展通道设…

    交互专题 2017-08-15
  • 你如何设计交互?

    进行界面设计时,很显然我们一上来就会想着画出整个流程。但这真的是最好的方法吗? 我曾偶然进行了编写一个具有想象的人机对话,之后我再继续使用画流程的方式。 编写人机对话的方法改变了我的思维方式,我再也没…

    2015-08-12
  • 营销型网站建设如何优化网站, 提高用户体验!

    营销型网站建设如何优化网站, 提高用户体验!据相关研究表明:当页面加载时间从 1 秒到 3 秒,跳出的机会增加了30%左右。1s到5s的机会增加到90%,如果你的网站需要10s的加载,跳出的机会将会超过120%。  这是令人难以置信的,因此有效的提高网站加载速度,对于搜索引擎优化而言很重要。  那么,我们该如何提高页面加载速度呢?  首选,我们需要对已知网站速度测试,总结归纳问题:其次,制定相应的整改策略:1、开启MIP百度对于MIP的...

    2018-04-11
  • 中国app产品UI在歪果仁眼里是怎么样子的?-Dan Grover

    小木导读:中美用户习惯的和文化的不同,造成了设计很多的不同。看惯了国内的设计,你了解外国人怎么看待我们的产品吗?接下来就可以带着疑问往下阅读。

    2014-12-30
  • 界面交互动效核心知识的分类与总结

    这篇文章是基于我自己的理解对界面交互动进行了分类整理和总结。

    2017-05-02
  • 减少认知过载的6个案例分析和解决方案

    作者:Danny Halarewich(译者:Iris_Uu)   导读: 文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌…

    交互专题 2017-08-07
  • 闪光的消亡对于用户体验来说意味着什么?

    而 Flash 是一个控制狂,那些拥抱 HTML5 的人往往是渐进增强的冠军。最后,我们的用户获胜。SuAnne 探索途径挑战现状,为现代的 web 设计。 Adobe 公司的决定停止移动 Flash 平台的开发及在 HTML5 相关的努力增加其…

    2014-09-04
  • 转化率低是设计师的问题?这锅我们不背!

    市场反馈好不好是由那些自带话语权或流量的人或产品决定的,这些人或产品既左右了大部分人的喜欢和习惯,又代表了大部分人的喜欢和习惯。转化率=(产生购买行为的客户人数 / 所有到达店铺的访客人数)× 100%

    2017-08-04
  • 【用户体验】机器人教练:第三季!

    【本文转自:哈尔滨腾达集团驾校】WELCOME TO TENGDA我们的腾达欢迎来到腾达驾校机器人教学活动已经举办了两期,机器人教学俨然已经成为了一种时尚热潮,同时也在学员中树立了良好的口碑,学员反响热烈,有越来越多的学员通过此次活动认识了机器人教练,并且想来体验一下机器人教练的庐山真面目。近一周的科二学习,可累坏了学员们、也累坏了教练。在此对大家说一句:大家辛苦了!经过几天风吹日晒,我们的科二学习已经正式接近尾声,本周最后一个科目的练...

    2018-04-23