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

技术标签: 操作系统  

从产品到设计

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

 

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

主要两个方面讲: 

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

   ●  交互设计与视觉设计

 

首先讲下第一方面:

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

           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

智能推荐

开源语音格式speex教程(for iOS)_speex的encode方法-程序员宅基地

文章浏览阅读997次。转自http://www.cocoachina.com/bbs/read.php?tid=114755&keyword=speex最新的编译博客最新的Demo这两天在折腾语音的东西,实现类似微信上对讲机的功能,做了两个Demo,一种使用lib-amr库用amr格式实现的,这个网上有现成的教程,所以还是比较好实现的。另一个是用的speex库,这个提的人很多,但是出教程的不_speex的encode方法

STM32+ESP01S(WIFI)上传温湿度(DHT11)至巴法云+手机app_stm32智能加湿器wifi控制app-程序员宅基地

文章浏览阅读1.5k次,点赞26次,收藏35次。翻东西时发现一个ESP01S模块,想着玩一下本篇学习ESP01S连接巴法云STM32F103C8T6最小系统板ESP01S模块DHT11温湿度传感器本篇为学习总结,只为学习测试基础功能,没有进行太多测试,可能隐藏一些暂未发现的问题,欢迎大佬们指正。_stm32智能加湿器wifi控制app

使用Gabor滤波器进行指纹增强:Matlab源代码详解_指纹gabor增强源码-程序员宅基地

文章浏览阅读228次。接着,我们可以使用wiener2函数进行噪声去除操作,以便更好的进行后续的指纹增强。但是,由于受到外部环境的影响和指纹本身特性的限制,指纹图像往往出现模糊、噪声等问题,使得指纹识别的准确率大大降低。其中,lambda表示滤波器的波长,theta表示滤波器的方向,psi表示滤波器的相位偏移,gamma表示滤波器的宽度,bw表示滤波器的带宽,N表示滤波器的个数。通过以上步骤,我们可以使用Gabor滤波器对指纹图像进行增强,得到更加清晰的指纹图像,提高指纹识别的准确率。_指纹gabor增强源码

(五)Docker 安装 redis镜像+启动redis容器(超详细)-程序员宅基地

文章浏览阅读7.7k次,点赞4次,收藏19次。(五)Docker 安装 redis镜像+启动redis容器(4)、命令参数含义:容器=完整Linuxdocker run:在docker中启动一个容器实例-p 6379:6379:指定宿主机端口与容器端口映射关系,容器与主机映射端口为,主机6379,容器6379,访问Linux端口就能访问到MySQL容器--name redis:容器运行后的名称,创建的容器名称。_redis镜像

单机Redis迁移K8s-Redis集群-程序员宅基地

文章浏览阅读161次。需要把这个RedisShake安装到k8s集群,然后k8s集群相互检测到redis集群的节点(因为节点直接都是用内Pod内网进行通讯所以必须安装到K8s的Pod内部切记!redis单机之间的迁移比较好解决,但是和redis和k8s-redis集群迁移目前市面的成熟解决方案较少。接下来分享一个较为成熟的解决方案来解决这个问题。文件,写上对应的端口号。和redis版本(很重要)遇到重复的key要求重写或者跳过。主备好pod里面的命令。

怎么更改mac电脑的系统语言,Mac电脑的语音设置在哪_如何在苹果电脑里设置语言-程序员宅基地

文章浏览阅读6.1k次。在国内,我们使用mac电脑,默认都是使用中文的。如果我们想要体验一下其他语言环境下的操作系统,那么如何设置更改Mac的系统语言呢?下面小编就给大家讲解一下苹果电脑系统语言更换的设置方法。1、首先在里面找到。2、点击左下角的号按钮,选择添加新的语言后点击下方的按钮。3、然后系统会提示需要将选择的语言设置为首选语言吗,选择是的话,系统语言就会被更改成我们选择的语言了。4、我们暂时选择不使用,回到设置页,在左边菜单栏中可以看到鼠标已经变成了的样子。5、英文的选项,直接至顶部,那么英文就变成了首选系统语言。6、更改_如何在苹果电脑里设置语言

随便推点

web3以太坊开发,前后端交互中涉及到的合约

在web3以太坊开发中,往往大家交流的时候,会涉及到一些合约相关的词汇,这里重点说两个合约,一个是manager合约,另一个是registry合约。

SpringBoot对接口配置跨域设置

在 Spring Boot 应用中,接口配置跨域(Cross-Origin Resource Sharing,CORS)设置是一个常见的需求,特别是当你的前端应用和后端服务部署在不同的域名下时。

android实现倒计时功能_anroid倒计时播报-程序员宅基地

文章浏览阅读611次。Android中的实现CountDownTimer类专门用来实现时间统计 直接使用这个类,或者自定义一个类 class TimeLooper extends CountDownTimer{ //参数为总时间,时间间隔 public TimeLooper(long millisInFuture, long countDownInterval) {_anroid倒计时播报

Open CASCADE学习|GeomFill_CurveAndTrihedron

GeomFill_CurveAndTrihedron类是GeomFill_LocationLaw的子类,用于定义一个位置法则(Location Law),该法则结合了一个曲线(curve)和一个三面体法则(TrihedronLaw)。该类提供了一系列的成员函数,用于初始化曲线、设置变换矩阵、复制位置法则、计算位置和2D点及其导数、获取连续性间隔、设置和获取参数区间等。Adaptor3d_Curve的句柄,分别表示曲线和修剪后的曲线。获取变换矩阵和向量的平均值。设置位置法则的变换矩阵。设置三面体法则的曲线。

IE浏览器使用get去获取数据时会使用缓存的数据作为结果_ie如何发送get请求拿取数据-程序员宅基地

文章浏览阅读1.2k次。1.缓存问题? IE浏览器提供的ajax对象在发送get请求时,会查看请求地址是否访问过,如果访问过,则显示第一次访问的结果(也就是说,会将第一次访问的结果缓存下来,下次直接使用,不会判断数据是否改变)。2.解决方法 1).数据获取方式由GET方式改为POST方式; 2).仍然使用GET去数据获取,但是地址后面加上随机数(使得浏览器不认为是同一个地址),例: a. v..._ie如何发送get请求拿取数据

《5G无线网络规划与优化》_hcia 5g无线网络规划与优化-程序员宅基地

文章浏览阅读351次,点赞3次,收藏3次。无线网络优化就是指充分利用已有技术手段(如软件平台、工具仪表等)对无线网络进行有针对性的数据采集和分析,并采取必要的措施对网络配置、参数、数据、天馈等进行调整,以实现无线网络资源配置的最优化,改善无线网络运行质量,提高用户感受度,使无线网络达到最佳运行状态。目前运营商都是多制式的网络,受市场和用户行为的限制,2G/3G/4G"同台”的局面将在一定时期内存在,而它们之间的相互操作将是一个非常复杂的过程,为了提高用户的体验,需要在总的驻留原则下进行非常细致的优化。双频网络优化,位置区优化,信道配置优化。_hcia 5g无线网络规划与优化