松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › 前端资源 › 为什么你的设计这么烂?-科学UI设计流程改进作品

为什么你的设计这么烂?-科学UI设计流程改进作品

迦娜王
1年前前端资源
356 0 0

本次分享主要解答大家在设计过程中常见的一些疑惑。设计在视觉提现上很重要,同样重要的是设计过程中的思考,本文将通过结合 同学们的个人项目,对设计进行了拆解与分析。

一、学习成果展示

为什么你的设计这么烂?-科学UI设计流程改进作品
为什么你的设计这么烂?-科学UI设计流程改进作品

二、同学们在作业中面临的问题?

  1. 视觉效果平淡、 精细化不足怎么办?
  2. 分析就是找资料嘛? 那如何落地到设计呢?
  3. UI规范不明确、 我做得对吗?
  4. 工作效率低,组件化的设计

三、思维培养从每一次作业开始

科学的作业体系

为什么你的设计这么烂?-科学UI设计流程改进作品

四、科学的设计流程:前中后设计思维

从科学的设计流程到界面层级和组件思维,

逐步提高设计精细度,全方位拔高学员设计能力,提高设计竞争力

为什么你的设计这么烂?-科学UI设计流程改进作品

五、设计流程讲解

为什么你的设计这么烂?-科学UI设计流程改进作品

01. 资料总结

为什么你的设计这么烂?-科学UI设计流程改进作品
为什么你的设计这么烂?-科学UI设计流程改进作品

同学问题1: 工作流程不完善,设计就是一顿抄?

为什么你的设计这么烂?-科学UI设计流程改进作品

痛点:中小型公司任职,缺少相对专业的设计流程;

现状:这种情况下,接到需求后会直接进行设计,但往往得不到领导的认可,造成反复改稿;

为什么你的设计这么烂?-科学UI设计流程改进作品

策略:那么如何有效挖掘产品背后的真实需求呢?

5WH是一种挖掘产品需求的思维体系和思考过程

通过了解产品和目标用户,可以总结出设计目标,这是一切的基础

同学问题2: 分析如何进行总结?

痛点:分析等于找资料吗?当然不是

为什么你的设计这么烂?-科学UI设计流程改进作品

策略:如果想更好的去理解产品,一定要理解和总结,下面是对酷狗的背景调研。在对行业和产品理解后,得出了酷狗的商业模式,并将商业模式进行了可视化研究版块分析,直接影响到首页中是否加入直播的版块,是产品内外环的重要依据。

为什么你的设计这么烂?-科学UI设计流程改进作品
为什么你的设计这么烂?-科学UI设计流程改进作品

02. 用户画像

同学问题3:用户画像如何影响设计?

通过数据得知,年轻男性为主要用户,结合付费人群特征,得出年轻学生和职场精英的用户画像,挖掘出用户态度、行为和期望,以及情绪板。

为什么你的设计这么烂?-科学UI设计流程改进作品
为什么你的设计这么烂?-科学UI设计流程改进作品

03. 分析落地

同学问题3:落地界面是如何用的?

品牌颜色一蓝色渐变为什么采用渐变?

  1. 凸显品牌感
  2. 渐变符合年轻化的潮流
为什么你的设计这么烂?-科学UI设计流程改进作品

六、设计中设觉拔高

为什么你的设计这么烂?-科学UI设计流程改进作品

01. 组件思维

作品展示

为什么你的设计这么烂?-科学UI设计流程改进作品

改版思路

针对首页的用户人群,对首页展示区域作优化,提升首页各模块的转化率。

为什么你的设计这么烂?-科学UI设计流程改进作品

组件化思维

界面采用卡片流设计,布局一致,更好的利用组件思维,方便复用。

为什么你的设计这么烂?-科学UI设计流程改进作品

组件应用

通过组件提高界面复用度,快速搭建界面,提升设计效率。

为什么你的设计这么烂?-科学UI设计流程改进作品

02. 设计精细度

视觉细节拆分

为什么你的设计这么烂?-科学UI设计流程改进作品

组件细节拆分

为什么你的设计这么烂?-科学UI设计流程改进作品

03. 界面层级

结合方法论和该产品实际情况,个人中心的视觉层级为:用户信息>核心功能区>功能入口区;

为什么你的设计这么烂?-科学UI设计流程改进作品

七、设计后视觉验证

为什么你的设计这么烂?-科学UI设计流程改进作品

01. 衡量指标

为什么你的设计这么烂?-科学UI设计流程改进作品

视觉衡量指标

原版我的将功能放入左上角汉堡菜单,音乐圈、K歌圈等功能用了文字样式,同时布局紧凑,字体层级不明显,导致用户识别和查找效率低.

为什么你的设计这么烂?-科学UI设计流程改进作品

02. 任务测试

任务测试

通过对个人中心改版A和B进行测试。

为什么你的设计这么烂?-科学UI设计流程改进作品
为什么你的设计这么烂?-科学UI设计流程改进作品

总结:选用B方案,在歌单较多的情况下,也不用担心找不到功能选项。

八、品牌IP精细度

通过这些进一步联想推敲,我们可以得出品牌颜色——蓝色渐变;

为什么采用渐变?首页此次作业切入点是品牌感,为了凸显品牌感,

首页没有采用顶部极简的设计;结合年轻化的潮流,显然渐变是我们的首选;

形象背景

为什么你的设计这么烂?-科学UI设计流程改进作品

关键词提取

为什么你的设计这么烂?-科学UI设计流程改进作品

细节灵感

为什么你的设计这么烂?-科学UI设计流程改进作品

三视图展示

为什么你的设计这么烂?-科学UI设计流程改进作品
为什么你的设计这么烂?-科学UI设计流程改进作品

形象IP拆解

为什么你的设计这么烂?-科学UI设计流程改进作品

耳朵主要用矢量图以及图层样式堆叠。

为什么你的设计这么烂?-科学UI设计流程改进作品

看似立体感十足的头部其实是内阴影的功劳。

为什么你的设计这么烂?-科学UI设计流程改进作品

眼睛的绘制中,难度在于类似月食的叠加投影。

为什么你的设计这么烂?-科学UI设计流程改进作品

衣领看似复杂,如果分解化简的话不难发现,光影的塑造在于高光和阴影之间构成的层次感。

为什么你的设计这么烂?-科学UI设计流程改进作品

衣服对高光和阴影的塑造更加细腻。用三层图层样式来塑造边缘的高光。高光和阴影在着丈(衣服中间部位)处通过明暗对比凸显质感。

为什么你的设计这么烂?-科学UI设计流程改进作品

手部的光影塑造手法和前面衣服的光影相仿。一开始做不出满意的光影是可以理解的,但请不要烦躁,去摸索,去尝试。同学们甚至可以摒弃教程,自己动手去试错,尝试得多之后就会逐渐理解符合世界物理准则的光影应该怎么去塑造。也不要忘了阅读光影相关的视频和书籍去学习光影的知识。

UI设计
0
Jenkins是否还要继续用?介绍一款基于容器的CICD平台Drone
上一篇
介绍一款抓包代理服务器--whistle
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
2月前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
2月前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
2月前
新手必看的前端项目去中心化和模块化思想
2月前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
45个值得收藏的 CSS 形状
你离可视化酷炫大屏只差一套 Kylin + Davinci
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css
西瓜视频开源能节省流量的 HTML5 视频播放器
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
231 喜欢
  • 0
  • 0
  • Top