产品设计

    今日:91| 主题:15636
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] 交互设计超强案例:详细分析平台规范与设计模式

[复制链接]
眼泪不要你 发表于 3 天前
21 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
交互设计往往对用户体验起着决定性作用,其重要性不言而喻。
   
交互设计超强案例:详细分析平台规范与设计模式-1 (设计原则,安卓系统,移动应用,产品设计,决定性)

  不管是移动应用的还是Web端的设计,交互设计对用户体验来说有着决定性的作用。遵循各自的设计模式和平台规范是最基本的设计原则。不同的框架承载不同的内容和设计目标,表达了不同用户获取信息的方式和行为,也表达了一些商业上的目标和意图。任何应用的基本信息组织逻辑都会以某种类似的层级框架来设定。在层级框架图片上的每块内容对用户的优先级和重要性是不一样的,同时手机界面的空间是有限的。
  移动端产品设计模式:

   设计模式-导航

  一般有标签式导航,分段式导航,舵式导航,抽屉式导航和下拉菜单式导航。
  
       
  • 标签式导航:ios端的标签式导航常放置在底部,而安卓在顶部。这也是最容易区分ios和安卓界面的区别点。安卓放置在顶部是为了和安卓系统自带的虚拟键区分,放置出现误操作的现象。常见的标签式导航数量一般不超过5个。   
  • 分段式导航:例如QQ。一般只分2-3个分段状态。体积小,属于ios的标准控件,但一般不适合做一级导航,常常和一级导航嵌套使用。同时安卓并不推崇这种控件。   
  • 舵式导航:例如美拍和早期的INS都是这种导航,是标签式导航的变种,在其基础上有强调了核心功能。一般图片社交的APP比较常用。   
  • 抽屉式导航:可以隐藏不重要的功能,让用户专注于重要的功能。例如打车软件,滴滴Uber等等,减少主界面的控件数量。在Meterial Design安卓5.0中,也比较推崇抽屉式导航。但是抽屉式导航也有很大的缺点。对于不太重要的功能相比标签式导航来说,点击率将会大大降低。   
  • 下拉式导航:在安卓4.0的时候比较流行,现在已经很少见了。但是能和滚动式标签导航互补。  
  没有最完美的导航只有最合适的导航。只有从需求出发,找到符合产品定位的导航才能给用户带来更好的体验。
   设计模式-列表

  列表相对来说更好理解,现有市面APP种类繁多,随手翻几个APP都可以看到各种各样的垂直列表,轮播面板和网格列表等等。垂直列表简单清晰易于理解,适合功能层级比较浅,功能切换不频繁的主导航。轮播面板更适合浏览体验式的产品,常见于各种Banner的推广页。网格列表功能扁平化,能充分利用界面,适合二级导航。支付宝和微信的钱包页面就是常见的网格列表。
  当然还有其他更多的瀑布流,时间轴或者对话框等形式多样的图文结合的列表模式。没有一个产品是只有一种列表模式的,合理根据产品的应用场景和需求出发,结合使用才会更好。
   web端的设计模式

  网页端的产品种类较多,但基本要素相似。logo,登录和注册,搜索,一级导航,个人信息等等通常放置在页面的顶层。而主要内容则根据不同类型的网页产品通过不同的页面布局来体现。常见的网页类型有:搜索类网站,博客类网站,电商网站,图片类网站,新闻类网站和产品类网站。随着用户习惯的养成,这些网站在实际生活中对于大多数用户已经形成了较为固定的心智模型。而且每种类型的网站竞品繁多,对于新型网站要如何突破吸引用户和对于用户群庞大的网站(如淘宝和新浪等等)如何留住忠实用户难度也越来越大。那么通过交互细节来提升用户体验,就显得非常重要。
  除此之外各类新型网站,例如卡片式不糊,滚动式动画,和利用新技术的动效效果的网站也层出不穷。这些则大多偏向展示类的产品。
  Web端产品设计

  接下来将利用案例从产品定位,页面结构和设计模式详细的分析web端,ios端,安卓端的利弊和不同。如有错误,诚请指出,谢谢~
   1.Web端产品案例:良仓

  产品定位分析

  1.用户人群:创意行业,广告业和媒体从业者等具有一定消费能力的小众人群,在国内的美学领域独树一帜。在互联网快速发展的时代,这一类人群不断增长。种子用户形态明显。
  2.用户需求:淘出品位。通过社会化和意见领袖两种方式为用户淘出品位,并提供购买方式,把良仓打造成一个速成品位的聚合地。有“淘出品位”这一心理的潜在用户很多,把握细分市场,一家独大。
  3.商业模式:媒体+电商。通过软实力对美学的独到审美定期高产分析内容,同时利用明星效应(达人)汇聚关注。结合电商,力图涵盖生活中各个方面,体现美学中小众主义的一面。
  页面结构分析

交互设计超强案例:详细分析平台规范与设计模式-2 (设计原则,安卓系统,移动应用,产品设计,决定性)

  有五个大的功能模块,首页推荐人气商品,数量小众而精。“商城”和“杂志”均可进入购买页面,利用年媒体属性和名人效应可以在“分享”和粉丝们分享一些有品位的收藏,更有名人入驻“达人”专区,社区属性加上名人效应对网站的流量的增值作业很大。
  
       
  • 首页:从是视觉的角度看,色调统一,字体和排版简洁,主页商品以人气为排序方式,推荐精品至首页。点击更多跳转“商店”。   
  • 商店:精细分类19项,除了日常的电商分类,还有“礼物”(包括送他,送闺蜜,送父母,送儿童等等)“推荐”(包括限量,优惠,独家,合作款等等)。   
  • 杂志:属于良仓的媒体属性。内容输出的主版块,包括趣味,数码,汽车,文化,时尚,美食,建筑,空间,圈子,清单。   
  • 分享:社交属性充分发挥的版块。   
  • 达人:即意见领袖,通过意见领袖为人们淘出好品味。提升用户对美学的认知,也提高了良仓社区的活跃度。  
  设计模式分析

  分别从导航,内容列表和表单三个方面分析优劣之处。从网站属性来看,良仓虽然有很抢的媒体优势,但仍旧是属于电商平台,而不同于搜索型平台的网站(如亚马孙,淘宝等等)搜索框做的很大,放在网页的核心位置。基于中国用户已经习惯了引导消费做出决策,一般的电商平台都需要增加站内广告陈列来引导用户的选择。而像良仓这样的需要美学引导的网站更甚。首页的banner轮播图,下方的广告推荐,以及人气良品,都是出于这样的考虑而布局。
  同时,利用格式塔原则规则排列,给人信任感,简单干净。大量的留白让页面看起来有灵气。高级灰的色调,像无印良品一样,给人一种对家的憧憬。具体页面布局如下图。
友荐云推荐




上一篇:The Complete Guide to Cross Cultural Design
下一篇:10 Things Web Designers Should Be Able to do in Their Sleep
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

元珊 发表于 3 天前
鄙视楼下的顶帖没我快,哈哈
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表