迅雷-从产品到设计-程序员宅基地

技术标签: 操作系统  

从产品到设计

很多网页设计师认为自己做好设计就可以,其他的事可不用理会和学习,那就大错特错了!一个优秀的设计师,必须深入了解产品本身、相关交互结构及用户体验等常识!这样设计师设计的东西才能深入产品中去,避免不犯错误!设计来源生活和思考,同样作为一个网页设计师,要不断地学习、思考、分析产品才能设计出更好的作品!

 

这里主要与迅雷看看产品为例,谈设计及用户体验的点点滴滴!希望对刚跨入网页设计这行的童鞋们有所帮助!

主要两个方面讲: 

   ●  了解产品需求设计(以迅雷看看产品为例)

   ●  交互设计与视觉设计

 

首先讲下第一方面:

   ● 了解产品需求设计(以迅雷看产品为例)又主要从四点来分析说明:

           1. 迅雷看看知多少

           2. 看看设计师面对的用户及关系

           3. 迅雷看看设计要求

           4. 迅雷看看具体规范

 

第一点:迅雷看看知多少

迅雷看看与优酷、奇艺、土豆、酷6等视频类网站,技术上最大的区别是什么?迅雷看看和优酷、土豆、酷6等视频网站从内容上说区别又是什么呢?迅雷看看用户使用的电脑分辨率比例是怎样呢?我们得知后,对我们设计有什么帮助,该注意什么事项等等都需要设计师深入了解产品后,才得到更好的结论!

 

2011年8月份数据:网站排名

权威数据监测机构艾瑞提供

2011年8月份数据:迅雷看看播放器排名

迅雷看看排在所有视频网站第三位,看看播放器排在第二位!流量和用户如此之大,有人会问这关我们设计师有啥事呢?当然有事!这就要求我们在设计的时候,严格要求自己,一个小小错误或者一个像素拖动都将会导致有不同的转化率出现,也会影响网站的用户体验,所以面向海量的用户群,更要求我们设计师本身做设计的时候要更严谨更注重产品细节。

 

迅雷看看的架构线

了解迅雷看看产品框架线,设计师设计的时候才能深入处理好相互之间的关系及风格的统一!

 

还需要了解迅雷看看用户分辨率、浏览器、用户操作系统这些数据,以便我们更容易做跨平台的设计。

 

第二点:看看设计师面对的用户及关系

作为一个设计师,不仅需要了解该产品的用户群体,设计出符合用户口味的风格,当然还要符合产品本身特征的风格定位!但更重要的是您了解该产品的产品经理想要一个什么样的东西,处理好之间的关系,便于加强沟通,这样才能设计出好的产品!

 

第三点:迅雷看看设计要求

主色调的统一

众所周知,迅雷看看的主色调是蓝色,设计时注意保持统一。像新浪是黄色 奇艺是绿色  土豆是黄色,优酷的是蓝色一样等,都有自己的色调体系!

整体把握

了解整个互联网视频网站的风格定位及方向,结合自身的特点,做到,内容最大,用户体验其次,  最后才是视觉设计。

 

第四点:迅雷看看具体规范

Logo、字间距、页面尺寸、版本间距、每个像素、链接颜色、字体、图片大小、图标、整体视觉风格等都要受到关注和有条理的统一。

风格的统一,可以说就是细节的统一, 细节决定成败 !

 

接下来第二方面:

●  交互设计与视觉设计  主要从四点来分析说明:

        1.什么UED

        2.用户体验的重要性

        3.交互与视觉设计间的关系

        4. 如何提高自己的交互能力

       

第一点:什么是UED

用户体验(User Experience Design,简称UED)是一种纯主观的在用户使用一个产品(服务)的过程中建立起来的心理感受。因为它是纯主观的,就带有一定的不确定因素。

用户体验主要是来自用户和人机界面的交互过程。

  一句话:以用户为中心、以人为本

 

第二点:用户体验的重要性

        1、提高用户的回访率(用户黏度);

        2、增强品牌气质的影响力和用户的荣誉感(口碑);

        3、提高产品持续获取利润的能力

        4、提高产品的用户满意度、为品牌带来不可估价的口碑;

        5、增强用户对品牌的忠诚度和信任度;

        6、合理而高效的促进用户点击欲望

        7、是超越竞争对手最有深远影响的一个重要方面

 

第三点:交互与视觉设计的关系

用户体验以用户为中心,交互设计是围绕用户体验展开设计的,而视觉设计是交互设计为中心的!

可以说,离开交互设计即用户体验的设计,必定是一个失败的视觉设计,

即使你的视觉设计再好再牛B,那也不过是画蛇添足罢了!

 

交互设计与视觉设计成正比,

好的设计,离不开好的交互设计做基石!交互设计要求我们细致,视觉简洁清爽,易学易懂,当自己是个挑剔的、笨的用户。

 

第四点:设计师如何提高自己的交互能力

         1.多看,多用,多研究用户体验好的网站(如amazon.com、yahoo.com)

         2.做的设计时候,不断滴思考和推敲是否可以有更好的改进,让视觉和体验得到完美的释放!

         3.分析网站的竞争对手,同样的东西它好在哪里,为什么这样做等!

         4.设计流程图能力

         5.表达能力

 

始终明确改善、用户及数据之间的关系

“改善”是手段, “用户”是核心,“数据”是根据.

 

举例说明,设计如何提高自己独立思考及交互能力

迅雷7上交互和体验上的问题

迅雷7“下载完成后关机”按钮设置完成后,跳出的提示框。当您操作的时候,粗略操作下!你很容易发现“取消完成后关机”与“关闭”按钮靠的太近,用户容易误操作;”关闭“按钮白色,不明显,很容易忽略!

接下来,设计师就可以解决这样的问题!如下图:

我们只要移下位置,关闭按钮换成提示框背景色一色系更深的颜色即可,颜色看上不就不会突兀!” 取消完成后关机“文字也可以精炼成”取消开启“即可,用户很好理解,它与前句呼应的关系!

当你做到这个时候,远远还不够!试问自己能不能更好呢?这时设计师需要去思考!才能用户体验更完美!

我们都知道,在网页设计里黄色一般表示”警示、提示、提醒、告知“的含义,而绿色表示:“通行、健康、环保、成功”的含义,顾提示框的颜色有问题,很容易被人忽略,没到达到告知、提示用户的目的!再深入思考,不难发现,提示框的出现的位置也有问题,用户粗略一看不知道提示出自哪里!发现了问题,那我们就可以更深入解决!

如下图:

这样话,用户容易操作,容易发现.也就达到你设计目的!

 

总结

设计师需要思考,做每一步都是讲道理的过程,

设计师需要了解,只有了解了产品的特征,才能做出更好的设计

设计师需要提高自身的交互能力,这样才能避免犯错误

设计师更需要不断的学习,提高自己的审美能力和动手能力.

转载于:https://www.cnblogs.com/youdoce/archive/2011/12/06/xunlei.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30532987/article/details/97447459

智能推荐

浏览器工作原理详解_在线浏览原理图-程序员宅基地

文章浏览阅读3.9w次,点赞47次,收藏283次。这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据,并花了很多时间来研读网络浏览器的源代码。她写道: 在 IE 占据 90%市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做不了。但是现在,开放源代码的浏览器拥有了过半的市场份额,因此,是时候来揭开神秘的面纱,一探网_在线浏览原理图

机器学习-Anomaly Detection_根据f1值或者查准率与查全率的比例来选择ε-程序员宅基地

文章浏览阅读347次。Problem Motivation异常检测(Anomaly detection)是机器学习算法的一个常见应用。这种算法的一个有趣之处在于:它虽然主要用于非监督学习问题,但从某些角度看,它又类似于一些监督学习问题。假想你是一个飞机引擎制造商,当你生产的飞机引擎从生产线上流出时,你需要进行 QA(质量控制测试),而作为这个测试的一部分,你测量了飞机引擎的一些特征变量,比如引擎运转时产生的热量,..._根据f1值或者查准率与查全率的比例来选择ε

【蓝桥杯2024真题】好数

【评测用例规模与约定】 对于10%的评测用例,1≤N≤100。对于100% 的评测用例,【样例说明】 对于第一个样例,24以内的好数有1、3、5、7、9、21、23,一共7个。时间限制: 1.0s 内存限制: 256.0MB 本题总分:10分。【输出格式】 一个整数代表答案。【输入格式】 一个整数N。【样例输入2】 2024。【样例输出2】 150。【样例输入1】 24。

Java毕业设计 基于SpringBoot vue城镇保障性住房管理系统

首页 图片轮播 房源信息 房源详情 申请房源 公示信息 公示详情 登录注册 个人中心 留言反馈后台管理 登录 个人中心 修改密码 个人信息 用户管理 房屋类型 房源信息管理 房源申请管理 住房分配管理 留言板管理 轮播图管理 公示信息管理角色:用户 管理员大家可。

xhadmin多应用SaaS框架之智慧驾校H5+小程序v1.1.5正式发布!

xhadmin 是一套基于最新技术的研发的多应用 Saas 框架,支持在线升级和安装模块及模板,拥有良好的开发框架、成熟稳定的技术解决方案、提供丰富的扩展功能。为开发者赋能,助力企业发展、国家富强,致力于打造最受欢迎的多应用 Saas 系统。

【Vue3源码学习】— CH3.4 baseCreateRenderer 详解

在 baseCreateRenderer 中,定义了多种方法,例如 patch、mountComponent、updateComponent 等,这些方法各自承担不同的渲染任务。这些定义不直接执行任何操作,而是为后续的渲染流程提供必要的工具和函数。baseCreateRenderer 更像是一个配置和定义渲染器行为的场所,而具体的渲染逻辑则是在实际调用 render 方法时,按需执行这些预定义的方法。这样的设计不仅清晰地分离了配置与执行,也使得 Vue 渲染器可以灵活地适应不同的渲染需求和环境。

随便推点

空调采集网关让空调更智能,让节能更简单!_空调外接网关进行数据采集的方案-程序员宅基地

文章浏览阅读304次。钡铼技术作为全球行业领先技术水平的工业物联网硬件研发企业,拥有资深的工控物联网产品的研发能力以及专业的工业物联网技术研发团队,为大型园区、楼宇、医院、学校、工厂机房等多种场景提供中央空调集成通信解决方案,根据各大空调制造商运用的不同协议,钡铼技术研发的空调采集网关目前支持大金、日立、东芝、三菱电机、海信、海尔、松下、约克、三菱重工、美的、奥克斯、博世、LG、格力等多个领先空调品牌。空调控制系统由云服务器、空调采集网关、空调设备组成。2、据测算,在正确使用空调的前提下,制冷空调温度每提高1℃,可节电8%;_空调外接网关进行数据采集的方案

经典收藏 50个jQuery Mobile开发技巧集萃-程序员宅基地

文章浏览阅读460次。1、Backbone移动实例这是在Safari中运行的一款Backbone移动应用程序。想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式。先不妨在你的浏览器中查看该应用程序。相关链接:http://bennolan.com/2010/11/24/backbone-jquery-demo.html2、使用媒体查询来锁定设备你可能会问如何使用CSS来锁定设备(根...

C++GDI做进度条-程序员宅基地

文章浏览阅读264次。直接上代码:#include <windows.h> /* This is where all the input to the window goes to */LRESULT CALLBACK WndProc(HWND hwnd, UINT Message, WPARAM wParam, LPARAM lParam) { switch(Message) { /* Upon destruction, tell the main thread to stop */ ..

7-34 通讯录的录入与显示 -----python_7-34 通讯录的录入与显示python-程序员宅基地

文章浏览阅读1.4k次。通讯录中的一条记录包含下述基本信息:朋友的姓名、出生日期、性别、固定电话号码、移动电话号码。 本题要求编写程序,录入N条记录,并且根据要求显示任意某条记录。输入格式:输入在第一行给出正整数N(≤10);随后N行,每行按照格式姓名 生日 性别 固话 手机给出一条记录。其中姓名是不超过10个字符、不包含空格的非空字符串;生日按yyyy/mm/dd的格式给出年月日;性别用M表示“男”、F表示“女..._7-34 通讯录的录入与显示python

K210与STM32之间的通信_k210与stm32通信-程序员宅基地

文章浏览阅读5.1k次,点赞2次,收藏70次。K210与STM32之间使用串口进行通信_k210与stm32通信

OpenHarmony语言基础类库【@ohos.util.List (线性容器List)】

而网上有关鸿蒙的开发资料非常的少,假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料,少走很多弯路,节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。

推荐文章

热门文章

相关标签