• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何提升设计鉴赏能力?来看高手的经验总结!

如何提升设计鉴赏能力?来看高手的经验总结!

作者:Z_Yuhan 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含产品分析,产品思维,产品设计,审美,经验分享,视觉层级等相关知识,Z_Yuhan希望在学习及工作中可以帮助到您

Z Yuhan:有时会觉得我挺不擅长做设计的。

着迷于从 Dribbble 里搬运优秀案例,却对如何组合运用一无所知。如果给你看我的设计稿,上面的重度阴影和无意义的装饰可能会吓到你。

缺乏设计天赋的我,通过努力找到了如何快速获取所需设计技能的方法。我想在这篇文章里分享这些设计方法,无论你是不是设计师,都会对你的产品设计鉴赏能力有帮助。

一、观察

提升产品设计鉴赏能力的要点是把自己当做产品的设计者。打开一个你经常使用的 app ,不要急于直接去找内容,而是专注观察眼前的屏幕。你需要注意的是这些东西:

1. 层级

用户的视觉焦点被如何引导?什么信息被高亮显示?元素的重要性是如何用颜色和字体表现的?

2. 内容

整体的文字风格是怎样的?有趣的内容有哪些,无聊的内容又有哪些?内容之间的留白是怎样处理的?

3. 意图

用户为什么会打开这个 app?产品解决了什么问题?和同类产品相比有什么优势。

4. 受众

谁在用这个产品?他们使用产品的情况和你自己有什么不同?产品设计是如何满足受众需要的?

二、使用

下图中我用 GIF 解构界面布局,仔细看,通过预测接下来会出现的组件,你可能察觉到先前未发现的细节。请带着好奇心思考设计方案背后的用意。

△ Airbnb 界面解构

可以用下面两种方式来思考:

  • 搜索框中的占位符本可以写「Search here」,却使用了一个具体的城市名称。尽管我并没有去伦敦的打算,但是看到这个可能性时依旧会有兴奋感。
  • 我好奇他们尝试过多少次必须先选目的地,第二步再选择日期(Dates)和入住人数(Guests)的方案,可以确定的是肯定存在。这让我对用户的搜索和筛选方式感兴趣。

△ Twitter 界面解构

观察:

  • 注意到 Retweets 和 Like 是粗体。
  • 时间戳里除了日期之外,也给出了具体发送时间。为什么要这样做?而且时间戳在不同的地方使用不同的展示格式(如在 Feeds 流中展示间隔时长,在详情页展示具体时间),思考一下为什么要做这样的区分。
  • 新建 Twitter 文本框中使用的占位符用词特别,不是「Add a Tweet」 而是「Add another Tweet」。

△ Spotify 界面解构

观察:

  • 注意 Spotify 是如何在阅读时继续保持歌曲播放的。
  • 最新发布内容同时包括最新歌单和专辑/歌手。
  • 用户可以关注周五最新音乐播放列表,但是不可以关注发布雷达(Z Yuhan:发布雷达 / Release Radar 将用户关注的歌手最新发布的歌曲收集列出)。深挖一下为什么会有这种限制——因为发布雷达的特殊之处在于,用户必须看完所有内容和标题才能作出决定,所以不提供关注功能。

三、理解规则,才能打破规则

下次你在打车或等朋友时,打开一个 app 然后想想它被这样设计的理由。时不时地这样分析 app ,你的产品思维和设计能力将会得到提升。

原文链接:《How to develop an eye for Design》? Kathleen Warner

欢迎关注译者的微信公众号:「交互进阶」

图片素材作者:Katerina Limpitsouni

「App分析让你对产品理解更深刻」

  • 《超过5000字的产品笔记,揭秘微信读书是如何让人上瘾的!》
  • 《用苏宁金融的案例,教你学会分析一款App》
  • 《腾讯的设计到底好在哪?高手是从这3个维度分析的!》
  • 《那些特别好用的App是如何设计的?首期揭秘:网易蜗牛读书》
  • 《用百度外卖的案例,教你学会分析移动端产品的方法!》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 7种不同类别对比,小程序和APP相比还有多大差别?
  • 如何做好电商类App?来看这份对新版淘宝的设计思考!
  • 如何提升设计鉴赏能力?来看高手的经验总结!
  • 如何简化操作流程?来看这篇超全面的总结!
  • Facebook 产品设计师:如何提高自己的设计审美?
  • 36氪产品总监:四大分析法打造你的产品说服力
  • 超全面!给用户体验设计师的提问清单
  • 竞品分析很重要,但很多人的方法不正确
  • 美团打车推出之际,来聊聊分时租赁的共享汽车
  • 产品思考:剖析“旅行青蛙”的火爆之处

相关文章

  • 2018-08-23腾讯内部分享!超全面的互联网金融体验设计的方法库
  • 2018-08-23让你的原型不再Low!这个设计师出品的 Axure 原型组件库现在免费下载
  • 2018-08-23刘兵克教程!聊聊字体设计中的加减法
  • 2018-08-23用户体验设计从业者有没有所谓的 35 岁中年危机?
  • 2018-08-23亲历者说!Evernote 产品设计师的改版案例经验
  • 2018-08-23如何做落地页设计?这儿有20个顶尖的案例和优点分析
  • 2017-08-06我的css架构理念—因人而异 没有最优 只有适合
  • 2018-08-23设计师的下半场,掌握全链路设计的5个方法
  • 2017-09-10前端开发者的工具、库和资源
  • 2018-08-23未来就在这里! 一组AR 和VR 相关的图标合集免费打包下载

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 这个网站用AI 帮你做LOGO,还可以免费下载!
    • 网页可读性提高的几个方法
    • AI教程!教你制作超唯美的游戏场景
    • 交互基础小课堂!目标导向设计之“用户目标”与“心智模型”
    • 用腾讯高手的交互自查表,快速搞定设计中的分支流程和异常情况
    • 产品设计中有哪些实用的行为经济学知识?
    • 那些很熟悉但又叫不出名字的设计法则:功能可供性
    • 从零开始设计一款APP之如何做好整理和交接工作
    • 学会这5个法则,轻松掌握格式塔理论!
    • form表单中的Input使用disabled不能提交的解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有