2017年过去了，距离上次写文章已经过去了一年多了，这一年多里学到了很多东西，从一开始纯视觉方面到交互、产品方面；从纯视觉到逐渐有一定的逻辑在里面，从偏感性到偏理性。懒惰的我这次将今年的一个项目写出来，记录一下自己的成长。
此次的项目是设计一个智能电视的主页，从一开始的用研到最后的程序实现，过程经历了很多的坎坷，也踩了很多的坑，这次将视觉方面相关的过程整理了一下。
1、用户调研
A、目标用户
这次项目的目标是一二线城市白领家庭、有子女的家庭。
目标用户
B、用户分析（Who）
i.目标用户有稳定的住房：购买电视的基础
ii.目标用户有内容消费的习惯，会购买各大视频网站的 VIP 服务：购买会员的基础
iii.目标用户有子女或即将有子女，会在有空的时候陪同子女一起看电视
C、场景分析
i.When：下班时间、假期（子女放假时陪同子女一起看电视）
ii.Where：卧室（主要地点）、客厅（可供客人来时的消遣以及子女观看儿童类的节目）
iii.Why：娱乐休闲、寻求共同话题（热播电视剧、综艺等话题）
iv.What：用户的主要观看节目为电视剧、幼教、电影、综艺、新闻
D、用户画像
用户画像
E、用户偏好（从装修及家具风格分析）
i.北欧风格：简介、直接、功能化且贴近自然
ii.日式风格：日式风格装修的特点是淡雅、简洁，它一般采用清晰的线条，使居家的布置带给人以清洁的体验，有较强的几何立体感
iii.现代简约主义：现代风格外形简洁、功能强，强调室内空间形态和物件的单一性、抽象性；运用最少的设计语言，表达出最深的设计内涵
iv.MUJI：无印良品不讲究外包装，强调以商品本色示人，不做过分的包装修饰，多采用有统一性的、简洁的打包出售方式
2、智能电视界面_原型
A、栅格系统
电视的栅格与手机和 PC 都不太一样，是以一个正方形为基础单元格，每一个入口的宽高都是单元格的整数倍，而实际入口大小还得减去入口之间的间距；这样做的好处是运营调整布局时，只要算基础单元格的格数，而且整体页面布局会更加的工整、规范。
主页栅格系统
B、原型图
从用户调研分析出目标的喜好风格：设计相关界面的视觉和动效时，以功能为主，形式辅助功能；整体风格简洁、统一；所以在设计时，布局及功能应该尽量简洁；布局根据栅格来划分。
原型图
从原型图可以看出，这次的主页设计与市面上的一些产品有所区别，就是推荐内容比较少，每个 tab 下只有一页，没有长页面的推荐内容，不需要去重复翻页从推荐内容中寻找自己想看的内容，而采取了更加直接的方式，直接从分类或者搜索入口去寻找。
C、电视系统 UI 组件
此次涉及到的电视系统 UI 组件如下图显示，根据前期调研选择相应的风格作为此次的效果。
电视系统组件风格
3、智能电视界面_规范
A、字号
字号
B、色彩
色彩
之前的文章有提到过，电视屏幕亮度偏高、色彩浓度高，所以颜色不适宜过于鲜艳。（纯白色可以用 #efefef 代替）
C、图标
图标
D、Tab 栏
Tab 样式
Tab 栏有三种状态：未选择、焦点、当前。
4、智能电视界面_效果
A、电视首页
首页效果图
i.最近观看：展示观看记录的第一条，直接呈现用户想要看的内容，省去操作步骤
ii.更新：用户收藏的电视剧或者综艺更新的时，提醒用户观看
iii.推荐内容：每日高分电视剧、电影推荐，省去用户寻找可看影片的烦恼
iv.三个功能入口：分别对应历史、收藏及推荐
B、我的电视
我的电视效果图
i.不同的输出口，当前选择可在左侧显示
ii.三个功能入口
C、内容分类
将电视用户最常用的四个分类直接在 Tab 栏显示：电视剧、电影、综艺、少儿，相同的布局下，为了区分每个分类，切换 Tab 时，背景随着第一个入口的内容发生改变，除了视觉上的享受外，还可以让用户清晰的知道自己当前所在主页的位置。
分类效果图
D、我的应用
应用效果图
i.应用界面：起始状态下推荐 8 个，用户可以自由的切换已经下载的应用到这个页面上
ii.应用商店：进入商店可下载各类电视应用
iii.我的应用：已下载在电视机上的应用，可在此入口查看
场景图
整个流程视觉流程大概就是这样，当然当中有许多细节的地方，就不一一叙述了，新的一年，希望能更上一层楼。
网友评论