经验分享——写给UI新人看的界面设计小技巧(一)

北京/设计爱好者/8年前/330浏览
经验分享——写给UI新人看的界面设计小技巧(一)

积累的一些小观点,整理出来进行记录。若能对别人有帮助那是最好不过的。

工作多年以来,也总结出一些自己的小经验,想要分享出来,个人拙见,希望能够对新人们有所帮助。因是临时起意,特意开了一个新站酷号用来写总结帖,有想到哪写到哪的嫌疑,或许会比较凌乱,请见谅。我列了一个小小的目录,以后若有新想到的,会继续增加。每一个小点我都配了几张小图,希望图文混合可以减少大段文字带来的不适感。谢谢

77935955e462a8012193a32d9f8a.jpg


一、购物车注意要点

b5495955ec37a8012193a3cf9895.jpg

1、在设计购物车时,首先一定要注意元素层级的区分,重要的东西要给予醒目,建议大家不要把名称数量与价格放在一个层级上,一件物品的价格一定要是最醒目的。然后才是名称,件数。

2、在购物车中,产品辅助描述能减就减(不包括如鞋子码数等必要信息),如果这件商品可以在标题里就体验特性,那其余的辅助文字就不要带,这样既可专注的在一个地方突出产品,又可以使页面清爽干净。

3、购物车中请切记不要有“猜你喜欢”“其他人还买了”等诸如此类的模块。这在视觉上会产生分散引导,使付款过程延长,时间变慢。页面要有专一度,负责引导客户结账的页面,请务必保证只让他想到付款这一件事。


二、如何使界面显得更大气


                                  b54e5955ebf8a8012193a3105549.jpg

1、多一些留白。现在的设计趋势在简约的道路上越奔越远,留白会使页面的呼吸感很足。

2、默认显示的页面上藏起并不是十分重要的元素,如第一张的粉丝,关注,余额,我们假设在这个APP上这些元素不是主要的,那么可以藏起来,隐到第二页,有效减少界面上的视觉杂点。

3、减少分隔线或灰色的分隔面。用排版来引导层次,效果更棒哦。如果你更倾向于使用常规的分隔方式,那一定要记住,线条的颜色要浅,灰度可以偏蓝。有些幽兰的灰色会比较高冷。

9d705955ef0ea8012193a31c9f7f.jpg


4、 在规范要求不那么古板的产品中,可以尝试一些排版上的小突破,不需要太多,一点点创意就能让你的作品有些与众不同,有些小新奇。但一定要记得想想会不会让程序猿们做不出哦。                                                    

060e5955ed61a8012193a39f7279.jpg

三、 更细致的用户体验


新人们在设计界面的时候,往往在用户体验上考虑的不是那么周到。但希望大家能在设计的过程中养成钻研体验的习惯,这样才能做出越来越6的产品,UI设计师,可不仅仅是美化界面。当然在一开始是没有这么深入的意识,那么可以从最简单的几点做起。

1、首先是一些小弹窗。简单的弹窗可以单手操作,而我们在单手操作手机的时候,往往是大拇指负责按键,而它的长度就限定了活动范围处在屏幕的下半截。这时候将取消按钮做在下面是非常友善的,用户完全不需要另一只手的协助即可轻而易举的完成关闭动作。如图2则必须要伸出另一只手。还有最方便的一种是点击屏幕取消(需要复杂操作的弹窗除外,例如需要输入金额等)

faaf5955ed43a8012193a3f4f9af.jpg



2、 请不要在用户使用QQ或微信直接登录后,又出现让客户注册APP账户的操作行为。现在市面上有许多的产品,在登录页面链接了QQ、微信或者微博登录,但很诡异的是,用户使用以上账号登陆后,还需要注册本产品的账号或要强制关联手机方可以进行使用。这让人有种被欺骗的感受,甚至会产生烦躁,从而弃用产品。注册的用户都是想先进去体验一把,若他觉得想用你的产品进行更深层的操作,他会很乐意去完善资料的,而不是一开始被强制要求。注册这种事,要么只能注册本产品的账号密码,要么确实可以只用第三方登陆。若你被要求一定要让两者整合起来,请务必给个“跳过”的按钮,让人有选择的余地。

0eee5955ed34a8012193a35b90ab.jpg




3、让注册更更更简单

注册时只填最最核心的信息,其他的都放在个人资料里,让有需要的用户自己完善。不多说,放两张图大家感受下自己使用哪一种更加欢喜。

0cc15955edd5a8012193a3fe6049.jpg

四、文字与图片的排版怎样才能bigger满满

1、勤换行,可以提升设计感。换句话说就不要那么规规矩矩两端对齐。我找了下面几张图,都是文字排版区域,虽然是英文,但换成中文后效果也并不会减半哦。我自己的项目中也经常会用到这个方法进行一些文字区域的排版,效果一直都很好。

2、加粗加大你的标题。大而粗的标题配上细小秀气的辅助文字,强烈的对比才能产生逼格的冲击。

2d435955e68ca8012193a3d420a6.jpg


五、忌用多种主题色

一个产品中的主题颜色不宜多,1-2种就好,追求简单干净的产品尤其如此。其余的多多的运用黑白灰。我们在学配色的时候应该都看过或者听过“黑白灰不算颜色”,但它们被灵巧的运用在配色中的时候,却又让页面精致无比。新人最忌在一个页面中运用过多的色彩,哪怕你想做一个渐变色的主题色,也应该用同色系的,而不要跨色区渐变,太过强烈多彩的渐变色只适合用在不上线的飞机稿中,因为人对于多彩的东西是会产生视觉疲劳的,减弱用户对产品最核心内容的关注。

以下四张页面来自四个不同的案例,大家可以看到,哪怕最花哨的页面,也只是其所运用的图片效果所造成的。主题色都没有超过一种,但每个页面看起来却都很丰富,很精致。


c1925955e6a5a8012193a3e244a7.jpg

 

六、寻找web官网页面灵感图

 

很多新手设计尸对于找参考会有迷茫感,不知道哪种最in最6最fashion!APP的参考我想放到下次再继续说,先从网站中最简单的企业官网讲起。

我不知有多少人关注过PPT的排版,说来惭愧,我是工作一年后才发现这个广阔的新世界的。某次我无意中打开了追波上的一个PPT频道,看到了很多炫酷到不行的版面,当时我正要给官网做一次改版,于是我灵光一闪。。(咳咳)。当然,这里说到的PPT仅限于高端大气上档次的那种,如果你一定要拿着政府或者商业报告人员所做的画有彩色大饼图的那种来驳斥我,我也不知道该怎么回答。推荐在behance上找PPT,那里聚集了世界各地的牛逼平面设计师,排版功力OMG!各种各样真的超级适合官网。

8f9b5955e753a8012193a3b3f1c6.jpg

 

第一篇先分享到这,thanks。据说点赞的都长得特别好看~~

11
Report
|
9
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in