Discuz! Board

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1|回复: 0

如何看懂UI效果图_1

[复制链接]

16万

主题

0

回帖

50万

积分

超级版主

Rank: 8Rank: 8

积分
502603
发表于 2024-12-14 13:12:36 | 显示全部楼层 |阅读模式

如果您想订阅本博客内容,每天自动发到您的邮箱中,请点这里



溪石OS是原创文章,非授权请勿转载,但是欢迎你评论转发呦,WOW!




“要把图标做到让我想用舌头去舔一下”



――乔布斯




用M标注后,开发时就能达到100%还原度吗?


客户(老板/领导)拿到软件的第一个意见,几乎都是关于UI的。有时得到的评价也挺简洁明了的,一个字“矬”。



于是惶惶不安的开发小弟经常想到的第一个解决方案:去问设计大神(美眉)要一幅详细的标注图。结果他得到这么一幅标注图:







这样一个页面中,标注了间距、大小、颜色和字号,每个尺寸都是像素级,这么多信息扑面而来,开发小弟开始有些抓狂,但他立志要摆脱“矮矬穷”的诅咒,硬着头皮修改了每个组件(L、IV)的坐标像素值,发布后,领导拎着个6过来,依然是一个字:“矬”,开发小弟叫苦不迭:标注尺寸给的是6 750的,奈何领导最近刚换了6,水平像素变为1242,原来标注的尺寸都无法使用了。



开发小弟该怎么办呢?再问设计大神要个6的标注图吗?考虑过开发A的哥们的感受么?



用设计师的眼光看效果图


不妨问自己这么个问题:




客户(领导)关心过像素吗?他们能说出字间距多少像素吗?




显然,没人知道你的软件界面使用了多少像素,更何况现在A或OS《人机交互指南》里用的单位都是点,具体屏幕上多少像素,由设备按实际屏幕尺寸运行时获得,所以几乎不可能按标注像素还原!



虽然像素不可用,但我们还是能做到让界面无限接近效果图,最终达到让用户想舔一舔的目标。



看懂效果图第一招:找对齐







观察橙色虚线框,它不在原本的效果图中,我们可以用任何绘图工具,在效果图上绘制出,可以发现,总是能找到这样一个矩形框,使得界面上的元素都在这个框中,并且左右上下的元素都能紧贴它。





如顶部的返回按钮和C,属于顶部对齐。





左侧的用户头像之间及返回按钮,属于左对齐。





不一而足,可以自己找找看哦。




另外,要注意,对齐是递归的。




这里的意思是,每个子元素,也是按要求各自对齐的:











看懂效果图第二招:求比例







图中标注了两个元素的像素(宽*高),正如前面所说,我们关心的,并不是它们的实际值,而是66  82 = 08这个比例,这个比例不会变!也就是说,如果返回按钮(上面带箭头)的大小变成90,下面头像的尺寸就应该是90  08 = 72。为什么这个比例如此重要?因为无论屏幕尺寸如何变化,导致返回按钮放大或缩小,头像永远不会比它大!加上前面的“对齐”原则,它们的相对位置、大小在不同屏幕上,“看起来”是不变的。



看懂效果图第三招:为重复做好准备







这个看似简单的页面中,包含了5种重复:





电影名称,竖版排布,中英文的字体比例。





电影图片,重复使用了水粉画风格,并多次使用空白背景。





电影台词,虽然背景不尽相同,但均使用了一抹油漆的效果,引号时有出现,暗示某些句子来源于台词。





台词区域的纯色背景。





红色评分。






这些重复部分从具体图片、颜色来说,又不完全一致,体现出一种多样性的统一,因此不能把重复简单地理解为同一元素的简单重复。




另外还有一些隐性的重复,比如电影图片选择,都使用了有代表性,但非官方宣传的场景、人物,体现出一种独特的品味;台词的选择也是如此,这里的重复是一种选择标准。



开发人员理解了这些重复后,要在技术上做好准备,简单的如电影标题的颜色,要支持任意颜色,竖版的中英文混合是个小小的挑战;



而对于台词的那一抹背景(包括引号!),要准备好支持各种图片,并根据文字的长度放缩(想一想,背景如何支持文字的换行?);



最复杂的,可能还是这个红色的分数,因为是动态的,并要呈现小时候考试试卷上手写打分的效果(包括倾斜和红色下划线),需要0~9个数字的图片,根据实际分数,组合图片,注意,个位数字的尺寸比十位数字要小,旋转后与红色下划线拼接(当然也可拼接后在统一旋转,方案不同,对图片资源的要求也不同);如果要求更高,还需准备手写体的矢量字库等方案。



不知道大家注意到没有,以上的技术方案都是在理解了设计需求的前提下,才能有意识的提出和执行开发,而在工作场景中,开发人员拿到的可能只是这么一张效果图,这时需要我们开发人员主动的去挖掘设计师的意图。



看懂效果图第四招:注意留白







留白是设计的一部分,是设计过的内容与不良设计的区别所在,




事实上留白是对元素的分组,表明了信息之间的关系。




如图中标示的、、三处,其空白的比例必须按效果图保留,即,这样,用户在这个界面上就不会困惑,一眼就能看出用户的昵称和对应的留言内容,不同的用户之间,由于的存在,形成了明显的区分。如果开发时不注意区分,做成了 =  = ,不单整个设计被破坏,这个界面的功能性和清晰度也会大打折扣。



总结:


对齐、比例、重复、留白四个设计师的视角,介绍了理解UI效果图的多个要点和实战经验,现在回头看看以前做的界面,可以指出“矬”在哪吗?欢迎留言、私信分享你的感想和经验,关注溪石OS,第一时间获得开发的奇技淫巧。



蓝蓝设计()是一家专注而深入的界面设计,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、界面设计、界面设计、包装设计、图标定制、用户体验 、交互设计、建设、平面设计服务



在此之前,UIUE设计的行情也在一度飙升,引起了广泛投资者的关注。北京兰亭妙微(蓝蓝设计)是一家专注而卓越的UI界面设计公司,以良好的服务为众多优秀企业提供卓越的UI咨询、竞品分析、交互设计、UI界面设计、大数据可视化设计、嵌入式软件界面设计开发、图标icon设计、大型网站设计、用户体验设计、软件开发....是一家从用户研究、交互设计及优化咨询、软件和网站设计、界面开发实施全方位提供解决方案的创新型设计公司。http://www.lanlanwork.com

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|芷惯网

GMT+8, 2024-12-23 17:31 , Processed in 0.052620 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表