从UI设计师的层面如何优化网站的设计体验

13
发表时间:2020-06-04 17:55作者:郑州做网站白杨网络

一般 UI 设计师刚到一家新公司会遇到2种情况:


office-3295556_1920.jpg


公司的产品视觉构架包括规范以及到设计团队建设都非常完备,产品体验从第一眼看过去就很棒,可优化的地方屈指可数。

与第一种情况完全相反。

那么我们从第二种比较糟糕的情况开始总结该如何从1过渡到2,做一个设计与用户体验的提升。

荥阳网站建设公司白杨网络总结如下:


一、基础问题梳理


是不是时常有面试官喜欢问这样的问题:你觉得我们的 APP 有什么可以优化的地方吗?


1. 一致性原则


一致性原则是雅各布 • 尼尔森的十大交互设计原则之一,在实际项目实践中有很强的指导性作用。


因为各式各样的原因,一些产品的视觉设计没有规范,由不同批次的设计师完成,导致 APP 中许多界面的视觉风格都不一致。


一致性体现的方面


控件结构:比如卡片底部操作区展示(点赞/评论/分享的固定控件样式)的统一。

视觉规范:主色调与其他辅色在各界面色值的统一,文字样式与主体文字大小的统一。

操作反馈:用户在使用 APP 同功能时的操作统一,并得到统一的反馈,比如点击弹窗关闭按钮,会有统一的下滑消失反馈。

一致性的重要性


因为对于用户来说,同样的控件样式/操作反馈都触发了相同的事情,而不同的界面视觉语言打乱了用户的界面使用惯性, 给产品易用性打了折扣。


同时,视觉上的不规范也仅对设计团队的后续版本迭代视觉规范管理有影响,对产品的品牌性也造成了一定影响,给产品带来一种不专业感。


虽然产品经理有时并不在意 APP 界面的不一致,但作为 UI 设计师应该以理服人推进到底 。


2. 视觉品牌性


通常我们给 UI 设计的作用定义都是通过视觉的方式优化产品体验传达品牌概念。APP 产品不同于我们常见的线下产品,用户对于它的感受几乎完全的依赖于线上界面中所提供的信息。因此除了本身的产品 LOGO 之外,整个 APP 的 UI 都在传达给用户这个产品的定位与品牌调性。


因此如果一个 APP 做出来毫无自己的调性,和 N 种竞品像素级类似,那么产品本身也就很难从众多的山寨中脱引而出。


3. 用户体验漏洞


我们在这里暂时不说用户体验提升,先单纯说缺漏。大家可能觉得只有刚刚做完1.0版本的 APP 会有这样的缺漏,成熟的 APP 就不会有。


二、如何做设计提升


你的设计从「能用」到「好用」有多远的距离?


1. 学会包装


这里说的包装,当然不是指你把作品用各种 mock up 和排版包装成 blingbling 的展示图,扔到站酷上就表示你包装成功了。


也有同学在站酷私信我,问面试总失败的原因,看过 TA 的作品之后就发现一个很严重的问题,作品不落地的同时过多的把作品停留在视觉包装上而非内容的包装。


如果你是一名在公司上班的 UI 设计师,那么在工作中很现实的问题就在于没有人会轻易同意你的设计稿(除非你是业界公认的大咖),从产品经理到设计经理甚至开发都可能从配色到风格开始 diss 你的设计稿,那么如何从一开始就争取到主动权呢?


用完整思考路径代替结果


无论是配色还是图标风格,相信都会有你自己的思考过程,把这些加上「证据」(竞品或大咖 APP 呈现的效果等)做成完成的分析,最后用一个完整的分析代替单纯的一页设计稿。


就算还会有不同的声音,但至少会让自己在前期站住脚,拿到主动权,并且很有说服力。


2. 设计移情


这个概念也是听过一次腾讯的大咖设计师分享之后知道的概念,当时感觉受益匪浅。


简化来说就是学会考虑用户使用场景,站在用户角度映射使用场景,考虑设计可能,把设计从能用变为好用。


3. 培养产品思维


数据化思维


很多好学的设计师注重设计创造力与交互理论的积累,容易忽略了数据分析的重要性。这个大概也就需要在实际工作项目中去体会了。


在整个项目进行中,数据分析基本可以分为:


前期调研数据

中期测试数据

后期结果数据


三、被误解的交互动效


动效在很多人眼里是和辅助一样的存在,真的这么鸡肋吗?


1. 交互动效的用途区分


现在 AP P中可以用到的交互动效按用途分,可以分为几个类型:


反馈型交互动效


在使用某个功能后,反馈用户当前 APP 功能状态切换的交互动效。涵盖的范围也非常广,比如下拉 loading、tabbar 上的微动效等。


功能型交互动效


特定工具类、直播类等产品所需求的元素动效。比如直播时飞过的飞机、清理应用时转动的风扇。这类动效通过拟物化设计完成特定的重要功能,增强了与用户的互动,是特点功能的最佳展现方式。


过渡型交互动效


在页面跳转与功能衔接中起到重要作用的交互动效。好的过渡动效避免了界面快速切换时给用户带来的迷失,给人以极佳的使用舒适感。


趣味型交互动效


起到锦上添花、增加趣味性和品牌调性的交互动效。


2. Lottie 开源动画库


通常我们做的偏复杂的 app 动效,在实际落地过程中会遇到很多问题,比如:Gif 图失真、占内存过大、开发成本过高。


那么由 Airbnb 开源的动画库 Lottie 就很有效的解决了这一系列问题。Lottie 可以直接利用 AE 导出的 JSON 动画文件,将其解析为原生代码,在 iOS 和 Android 设备平台上运行。


友情链接:百度 网站地图 郑州网站建设公司 郑州做网站公司
公司地址:河南省灵宝市解放南路长安公寓701室  张经理:15936889988
公司固话:0398-2652651 Email:[email protected]
公司主营业务:网站建设-微商城制作-小程序制作-网络营销推广