tuy

结合 一淘玩客 项目探讨敏捷体验设计方法 | 复杂产品的响应式设计过程

由于雪燕姐有朋友在淘宝工作,所以这次有幸来参加淘宝旗下一淘网的一个敏捷项目-玩客交流会,我表示非常幸运,同时自己也意识到要多吸收点东西回来,去之前尽量把自己当成海绵,挤干干了去听(虽然当天杭州的雨很大)。由于人数比较多,而且我又迟到了10分钟(15:00从公司出发来不及),上半场是站着听的,下半场才有座位。
下面是我记录的一些知识点:
一淘网:UX
敏捷设计的过程:交互跟视觉会提前1~2天开始工作,其它部门后续基本都是并行开发,就是不存在很生硬的时间空隙;

敏捷设计的原则:全体项目组成员一起定需求,美工从项目初期就深入参与。后期需求变更会相对较少。
玩客的整体风格定义是通过全体成员的两次脑暴来成型的。

视觉协同工作:因为多人合作,很容易出现视觉误差,即不同的页面出现不同的风格,后来发现这个问题之后,项目团队马上讨论,推出让专人进行视觉统一组件的设计,这些组件包括:按钮,图标,导航,翻页等等,设计好这个组件模板之后,设计师们就可以调用这些模块,进行新页面的设计工作。保证视觉的统一,而且通过这些模板也可以大幅提高效率。
美工跟前端的结合:比如一些复用的模块,有原型设计好功能之后,可以让美工只做一个版块,复用的工作让前端去完成,美工跟前端协商好复用规则。这样就可以节省美工的复用设计时间。

响应式网页:适配性,开放性,统一性。
传统的网页:固定内容,固定板式,不会随着用户界面的变化而变化。
响应式网页:弹性内容,不同的容器,根据不同内容变化不同容器。

响应式怎么做?
1:内容策略:根据价值定位和用户故事,确定站点信息架构;
2:移动框架:分析页面内容按照优先级,确定手机端,ipad端的页面框架;
3:响应式框架:完善页面框架,总结布局结构(不同设备)

固定栅格:比如我们现在的电子口岸门户,四方物流等等,页面板式是固定的;
流体栅格:像我们的会员中心,根据页面的窗口的大小会自动换行,当页面到达最小宽度的时候,每行只显示一个内容块。
流体栅格有两种实现方法:
1:根据百分比计算像素:这种方法有个问题就是像素会出现小数点。
2:根据像素计算百分比:保证像素是整数,改变百分比,不同的窗口,模块间隙不一致,宽屏间隙大,窄屏间隙小 (玩客项目用的就是这个方法)

后记:与会人员基本是淘宝内部员工,视觉交互类比较多,当然也不乏一些运维,后台(少数)。气氛比较活跃,人数大概是在80人左右。听完之后收获还是很大的,很大体现在,他们在处理界面呈现的时候会精益求精,而不是点到为止,像这次的通过像素计算百分比&设置临界点 进行响应式网页实现,就是他们一淘的员工自己创意出来的,而且在实际项目中得到了非常好的呈现效果。

码字很辛苦,转载请注明来自tuy博客《结合 一淘玩客 项目探讨敏捷体验设计方法 | 复杂产品的响应式设计过程》

评论