前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >如何从Dribbble的“飞机稿”中汲取营养?

如何从Dribbble的“飞机稿”中汲取营养?

作者头像
用户5009027
发布于 2019-06-02 13:13:20
发布于 2019-06-02 13:13:20
1.3K0
举报
文章被收录于专栏:静Design静Design

关注+标星「静Design

海量设计干货 每天准时放送

不管你同不同意,Dribbble上的设计都在直接或者间接的影响着我们的UI设计趋势的变革,虽然有些设计看起来只是飞机稿,有些则没有考虑产品的真实需求。但是咱们UI设计师小伙伴却善于提炼和改进,将这些设计趋势和风格为我所用,提炼出适合本国产品和用户的界面。比如直接我们提到过,腾讯QQ手机端改版中大量使用无分隔线的设计,就是这种趋势的再利用和深度思考所产生的结果

因此,有人问我怎么看待Dribbble,我想说:当你真正能从这些Dribbble风设计中看到趋势,并加以思考,创造出独特的属于自己的风格,且被市场和用户认同的时候,这才是你真正进入UI设计后半场真正的入场券。

接下来,让我们看看最近Dribbble中的优秀(fei ji gao)设计吧!记得,欣赏的过程中提炼+批判+思考,这才是学习的正确方式哦~

这个游乐园主题的设计运用了大量的插画和鲜艳的颜色进行搭配,白色背景与大阴影的搭配让浏览者眼前一亮。这也是典型的Dribbble风格,相信大家都能明白。

设计师:Moze

https://dribbble.com/shots/6369889-Park-navigation-app-Vol-1

如果是图书类型的应用,你会选择怎样的设计风格呢?好的,同样是白色背景,无边框设计已经大量鲜艳颜色的使用,其实看多了,我们能找出这种类型设计的规律来。总结一下,就是:矢量插画+艳丽色彩+白背景+大阴影+大留白。Get到了吗?想一想,如果让你来做一个图书类型的应用,除了这样的风格,怎么能让自己的设计显得更加与众不同而不是完全的为了Dribbble而Dribbble呢?

设计师:Anton Mikhaltsov

https://dribbble.com/shots/6367657-Reading-App-Design

下面这个设计是国内UI设计师的作品。其实,我们仔细观察,会发现不少套路,抛开这样颜色纯净的书封面,那么这样的设计稿是否具有足够高的可用性。毕竟,不是所有的书都是这样的风格,那么作为设计师的大家应该如何处理?从一定程度上来说,下面这个设计稿,并不能算正面例子。他的最大意义是让我们了解配图对于设计稿的重要性。

设计师:Mr.Shi Li

https://dribbble.com/shots/6368615-New-Bookstore8

接下来欣赏一副插画作品,简单的线条勾勒出一男一女的生活,那么他们两个人到底在干什么呢?睡觉还是?大家自己 猜一猜。方块和圆形的搭配是这幅图俄亮点,女性是柔软的曲线,男性是刚硬的直线。对比鲜明。

设计师:Afterglow

https://dribbble.com/shots/6369340-Psychology-Illustration-Poster

印度尼西亚设计师的作品,绿色的美食应用。emmmm,绿色也许是很清新的颜色,但是对于我们国内的小伙伴来说,可能缺少那么一点点食欲。大家怎么看呢?反正,我觉得看了绿色后,不太饿了(笑)。在本作中,大家可以学习一下navibar的设计,通常,它会和轮播图各搭界一半,形成视觉层次感。

设计师:Sulton hand

https://dribbble.com/shots/6369568-Food-Recipes-App/attachments/1363850

其实静电总想在Dribbble中给大家找一点不一样的风格的设计,因为插画风看多了也是会腻歪的。那么这幅大家觉得如何?健身类型的应用。当然,这里我们又Get到一个设计的诀窍,纯色背景!你会发现,如果你随便扔上去一张乱糟糟的模特图片,你的设计马上就完蛋了。这个设计的特点就是模特背景全部是精挑细选的图片,看起来是不是精致了很多?那么?各位小伙伴,你是不是要考虑下,自己拿起相机,租个摄影棚,来拍摄一些这样的照片?或者把他们抠出来重新处理来用,会更好一些呢?这对于我们的后期运营提出了超级高的要求。怎么说,设计总是在不断的妥协中成长吧。

设计师:Ramotion

https://dribbble.com/shots/6302983-Vshr-d-Mobile-Design

下面这幅图,我们要学习的,就是它更纯净,更鲜艳的颜色。总感觉这样的图稍微有些调皮和有趣,它们适合用在更有风格的产品中,而不是过于商务和正统的产品。因此,请大家在设计任何一类产品时,务必考虑产品的调性,公司的风格。因为不是所有的企业和用户都喜欢这样的风格。

设计师:Mike | Creative Mints

https://dribbble.com/shots/6285205-Bogo-Apps-Web-site-design

想象一下,图片对于一副设计来说是否特别的重要呢?人如果下面这个图换成一副照片,或者科幻电影里那样的场景,那就真的更酷了。所以,这幅作品给我们的启示就是,选图太重要了。

设计师:Walid Beno

https://dribbble.com/shots/6361527-Titan-Mining-Concept

当我们看了太多的设计后,你是否会感慨,现在的UI设计已经不是单纯的排版了,而是在拼配图。确实,这就是UI设计的后半场,也是所有设计的后半场,网页设计,app设计,还有各种各种设计。(摊手)现在的设计形式越来越多样化,多元化,各位UI设计师也不能仅仅局限于排版了,当进入后半场,要么思维强(广度和深度),执行力强,要么技术更牛,你会选择哪一种发展方向呢?

不管是不是飞机稿,希望各位设计师都拥有足够的能力,将自己的设计稿变现,被市场认可,被用户认可。

设计师:Roman Klčo

https://dribbble.com/shots/6362521-Fuel-Station-at-Night

欣赏的过程中提炼+批判+思考,

这才是学习的正确方式哦~

而单纯的临摹,不分场景和用户的套模板

最终会让你走入死胡同

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Qml数字键盘
双十一购物节为了避免剁手,给自己一个小目标,写个Qml数字键盘分享给大家。 1. Qml键盘代码 Rectangle { id: rootKeyboard property color backgroundColor: "#202120" //default property color pressedButtonColor: "#00a0fc" // default property color normalButtonColor: "#303751" // d
Qt君
2023/03/17
8580
Qml数字键盘
兼容Qt4/Qt5版本Qml控件CheckBox
复选框显示一个可切换(选中)或关闭(未选中)的选项按钮.复选框通常用于从一组选项中选择一个或多个选项.
Qt君
2019/07/15
1.1K0
兼容Qt4/Qt5版本Qml控件CheckBox
Qt官方示例-QML标签页
❝TabWidget示例演示了如何使用属性别名和QML Object默认属性创建标签页。❞ TabWidget.qml Item { id: tabWidget // 核心实现 // 将默认属性设置为stack.children意味着TabWidget的所有子项实际上都已添加到"stack"项的子项中。 // 有关默认属性的详细信息,请参见"Property Binding"文档。 default property alias content: stack.c
Qt君
2023/03/17
1.3K0
Qt官方示例-QML标签页
qml入门教程_前端从入门到放弃
<9>:Property and number animation in mouse event:
全栈程序员站长
2022/09/19
1.9K0
qml入门教程_前端从入门到放弃
Qt开发-QT Quick
Row 则是一个单独的 Item ,专门用来管理其它 Item 的,后面介绍的几种布局,也是类似的。
码客说
2021/11/10
2.6K0
QML自定义滚动Text控件
与系统Text一样的做法,但在这基础上添加自动滚动文本的功能。 Text滚动效果 使用示例 Rectangle { width: 150; height: 30 color: "red"
Qt君
2019/07/15
1.3K0
QML自定义滚动Text控件
完全依赖QML实现播放器
一直听闻QML无比强大好用,工作中需要扣一个同时播放视频的Demo,所以就趁这个机会研究了一下。
gongluck
2020/03/05
2.3K0
完全依赖QML实现播放器
兼容Qt4/Qt5版本Qml控件ComboBox
组合框是一个组合按钮和弹出列表。它提供了一种向用户显示选项列表的方法,这种方法占用最小的屏幕空间。数据模型通常是一个javascript数组、C++端的List类型、未来还会提供对ListModel或整数的数据模型支持。
Qt君
2019/07/16
2.2K0
兼容Qt4/Qt5版本Qml控件ComboBox
Qml的Slider控件示例
通过自定义样式美化Slider 起始值0处标识同心圆; 拖动动画变化颜色; 气泡显示数值. 示例源码 import QtQuick 2.0 import "../" as My Rectangle
Qt君
2019/07/15
2.4K0
Qml的Slider控件示例
【C++】Qt:QML介绍与入门示例
Qt Quick是一个用于构建现代、高效、可扩展用户界面的框架。它是Qt开发框架的一部分,旨在通过声明性语法和JavaScript绑定来简化用户界面的设计和实现。
DevFrank
2024/07/24
7230
【C++】Qt:QML介绍与入门示例
兼容Qt4/Qt5版本Qml控件ScrollBar
1. ScrollBar演示 2. 对外属性 继承于Rectangle; target属性继承于Flickable(默认值父控件); orientation设置控件水平还是垂直方向(默认值垂直方向).
Qt君
2019/07/15
1.4K0
兼容Qt4/Qt5版本Qml控件ScrollBar
兼容Qt4/Qt5版本Qml控件Slider
通过滑动滑块选择一个值 导入方法: 文件导入 兼容性: QtQuick1.x与 QtQuick2.x 继承: Item 属性 background: Item from: real handle: Item orientation: enumeration position: real pressed: bool stepSize: real to: real value: real 方法 function decrease() function increase() 描述 通过滑动滑块选择一个值 Slid
Qt君
2019/07/15
6840
兼容Qt4/Qt5版本Qml控件Slider
Qml失焦问题
Qml常见诡异失焦情况一般为明明设置了某一控件的焦点, 实际却是不生效。这到底时什么情况呢?用例子来分析这种情况。 1.常见失焦情况 被其他控件抢夺; 误以为设置成功。 2.关于控件被抢夺的情况 2.1 先看下列例子 Dialog { id: dialog width: 100; height: 100 onHidden: { dialog.forceReset() // restore focus to 'yes' button } } Rectangle
Qt君
2019/07/15
2.4K0
Qt界面UI之QML初见(学习笔记四)
一 概述 QML是一种专门用于构建用户界面的编程语言,它允许用户构建高性能,具有流畅特效的可视化应用程序,QML是可读的,声明式的文档,具有类似JSON的语法,支持使用JavaScrip表达式,具有动态属性绑定等特性。 二 QML语法基础 QMl的代码一般长如下: import QtQuick 2.2 Rectangle { width: 360 height: 360 MouseArea { anchors.fill: parent onClic
用户1198337
2018/01/19
2.6K0
Qt界面UI之QML初见(学习笔记四)
QML入门教程:一、QML和QtQuick简介以及QML实例
从 Qt 4.7 开始,Qt 引入了一种声明式脚本语言,称为 QML(Qt Meta Language 或者 Qt Modeling Language),作为 C++ 语言的一种替代。而 Qt Quick 就是使用 QML 构建的一套类库。 QML 是一种基于 JavaScript 的声明式语言。在 Qt 5 中, QML 有了长足进步,并且同 C++ 并列成为 Qt 的首选编程语言。也就是说,使用 Qt 5,我们不仅可以使用 C++ 开发 Qt 程序,而且可以使用 QML。虽然 QML 是解释型语言,性能要比 C++ 低一些,但是新版 QML 使用 V8,Qt 5.2 又引入了专为 QML 优化的 V4 引擎,使得其性能不再有明显降低。在 Nokia 发布 Qt 4.7 的时候,QML 被用于开发手机应用程序,全面支持触摸操作、流畅的动画效果等。但是在 Qt 5 中,QML 已经不仅限于开发手机应用,也可以用户开发传统的桌面程序。 QML 文档描述了一个对象树。QML 元素包含了其构造块、图形元素(矩形、图片等)和行为(例如动画、切换等)。这些 QML 元素按照一定的嵌套关系构成复杂的组件,供用户交互。 ——摘自《Qt学习之路2》
全栈程序员站长
2022/11/01
4.6K0
QML入门教程:一、QML和QtQuick简介以及QML实例
翻译 | QML编码约定
如果列表对象仅包含一个元素,则通常会省略方括号。例如,一个组件仅具有一个状态是很常见的。在这种情况下,如果这样写:
Qt君
2020/02/14
9660
【专业技术】还有人在用Qt开发app嘛?
编者按: 这个世界不缺工程师,但是缺大师。如果在Qt里写个app,传统做法,需要熟悉API,熟悉C++,熟悉Qt本身的实现,同时还要熟悉编程环境。 现在出现了一种类似于脚本Javascript的语言,利用它,我们可以少编写一些程序逻辑。可不,最近我就利用它开发出了个浏览器。大家都没有。 欢迎来到声明式UI语言QML的世界.在本入门教程中,我们使用QML创建一个简单的文本编辑器.阅读这个教程后,就可以使用QML和Qt C++开发应用程序了. 安装 首先需要安装包含Qt Quick的Qt最新版本,现在是Qt4.
程序员互动联盟
2018/03/14
4.9K0
【专业技术】还有人在用Qt开发app嘛?
QML动态显示组件(支持在线编辑动态刷新)
QML动态组件显示器主要用于方便界面开发,在线编辑保存后自动刷新组件界面,并支持拖拽文件显示的方式。
Qt君
2019/07/15
5.5K0
一个好的Qml文件(翻译文)
  什么样的Qml文件(通常称为组件)是一个高质量的文件?   让我们看看示例1:
Qt君
2019/07/15
1.2K0
pyqt5与QML开发小结
qt 5.11 与 qt 5.12 中Qquick的差异还是蛮大的,由开发环境:Pyqt5.11 + Qt5.12 部署到 Pyqt5.11 + Qt5.11时遇到以下问题:
py3study
2020/01/17
1.5K0
相关推荐
Qml数字键盘
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档