header_v0.7.32

百张界面练习【上】

251天前发布

原创作品 / UI / APP界面
作品版权由Breezeee 解释, 禁止匿名转载;禁止商业使用;禁止个人使用。 临摹作品,同人作品原型版权归原作者所有。

做这组练习的初衷是为了提高视觉能力,积累一定的比较优秀的界面处理方式,所以我花了相当的时间在Dribbble、Behance、站酷、UI中国挑选优秀的界面进行临摹。
练习前对自己订了如下几个原则:
1、不使用取色工具,所有颜色必须自己调出来。
2、每张图的练习必须有明确的目的, 比如提高色彩感觉、积累配色方案、积累控件样式,又或者素材的处理方式、界面元素对视觉流的引导、对信息层级的分层。
3、ICON尽量自己画。
4、保证每张界面完成的质量。

以下是对每张练习的一些分析,是自己对百张界面练习进行到一半的一点总结,文字并非结论而是自己的观点,如有错误请一定指出。
希望得到各位大神指点,谢谢!

积累图文排版方式。小面积的几种颜色的使画面清新。

蓝色和绿色属于邻近色,加之使用相近的明度、纯度,搭配起来平稳柔和。
聊天气泡的小尾巴处理方式也很有趣。

拟物不仅仅是指把图案做得和照片一样,提取物体的主要特征,用简洁的设计体现出来,这样的拟物在界面中应该会比超写实有意义得多。

积累图文排版。临近色相通过明度纯度的变化造成高对比的练习。

注册页:
左图:大面积的黑白蓝撞色给人带来视觉冲击。背景中logo和照片的结合方式也很棒。记得色彩课上有说过,色彩的平衡可分为1、互补色平衡2、冷暖色平衡3、深浅色平衡4、有彩色与无彩色平衡5、花色与纯色平衡6、色彩面积大小平衡。左图至少满足了4/5/6,值得学习。
中图:添加杂色或其他纹理可以增加质感。
右图:简洁的几何形状也可以组成很有美感的界面。在以白色为主色的界面里,小面积的颜色之间(尽管颜色本身搭配不合适)但会降低不和谐感。

这张界面把色相环搬到了21数字中,从黄过渡到绿,2与1之间用深灰、黑进行分割。界面下半部分也用彩色进行点缀。整张界面看着很舒服。对色彩的驾驭能力,也是我要不断提升的部分。(首先要换个色差小的屏幕qaq)

1、深色背景和比较粗的白色字体形成强烈的对比,带渐变的蓝色作为图标数据呈现的点缀色使界面带有时尚感。
2、尝试使用MD原则对字体层级的区分,即通过调节alpha值“[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字]”

积累数据表现形式、积累配色。

豆瓣最近的一个50周年电影回顾移动端网页。MD原则中有一项“图片上的文字,需要淡淡的遮罩确保其可读性。”这个界面就体现了遮罩的作用,并且遮罩使画面更有呼吸感,电影剧照本身可以使很优秀的素材,可以让它更好地展示。

背景:以深灰为主色调时,通过明度的调整区分区域层级。
文字:通过调整字体粗细,区分文字层级。

22
1 2 3 4

作品信息

  • 创作时间

    2017/01/16

相关作品 收录收藏夹 TA的主页
百张界面练习【上】
意见反馈
没有新消息
密码登录
短信登录
微信二维码登录

提示文案

提示文案

提示失败
提示成功