潍坊UI培训
达内潍坊中心

18300268127

热门课程

设计思路分享

  • 时间:2017-12-26
  • 发布:潍坊达内
  • 来源:互联网

    58同城是中国互联网生活服务领导者,作为中国最大的分类信息平台,大多数用户来这里主要的诉求都在找房、找工作或二手车等。那么如何延长用户在平台的停留时长,而不是用完即走呢?为此,58同城App在8.0版本的UI设计做了很多新的尝试,使得用户来到58不仅只是查找信息,还能跟有相同诉求的用户们一起交流。
    为应对产品的日益变化和用户的不断成长,我们将产品诉求分解开来,通过视觉语言落地到了启动页、引导页、首页、消息中心等方面,希望给用户带来耳目一新的版本。
    设计思路
    首先我们明确了改版的设计概念和思路,由于58同城汇集了各种生活服务类的分类信息,进一步来看,这些信息都源自于人在城市中生活的各种诉求。所以我们想通过一些适合的场景,用视觉语言去描绘“人在城市中生活”的这个概念,由此衍生出的设计思路便是三个关键词:人、城市、生活。我们的设计将围绕这个主题给用户带来一些情感上的共鸣,切实的让用户体会到58带来的“生活更简单”.
    下面我将分别从以下几个页面来展开讲述:
    首页
    启动页
    引导页
    消息中心
    首页
    顶部插图设计:在8.0版本中,视觉上最直观的改变便是首页顶部插图的新设计。即是,打开首页下拉过程中所看到的插画部分。
    旧版顶部插图设计

    我们先来分析旧版存在的问题,旧版以城市为概念,设计师们描绘了28座热门城市的标志性建筑物。当用户切换到这些城市时,顶部头图就变为当地的地标建筑物。后来我们发现,对于绝大多数用户来说,是很少有机会切换到别的城市,所以即使我们做了28个城市,很多用户长期也只能看到1-2种头图。另外标志性建筑概念的可延展性比较小,如果要把全国几百个城市全都绘制出来,成本很高,用户也难以从中发掘出新鲜的感受。

达内UI培训

    为了给用户带来共鸣,我们围绕“人在城市中生活”的这个概念,重新构想“城市”的插图概念--以最生活化的视角观察城市,从不同的角度描绘城市所带给人的印象。描绘硕大的建筑物,描绘道路桥梁,描绘公园,描绘家庭等,组织出日常生活的图景,建立起与用户的情感联结。
    新版展示
    在插图绘制中,用抽象的元素形态,构建出了更有设计感的图形语言。
    大块面的几何形状大量运用,局部细腻刻画,微妙的处理光源与物体的关系。而设色多用同类色渐变,在极小的色彩范围中处理素描关系,完成空间感的表达。
    系列图中都有太阳处在画面正中,不仅是贯穿系列的固有元素,同时也是动效设计的切入点,下拉刷新时出现光芒的动态变化,在与用户互动时使画面更加鲜活。
    在大与小,虚与实,动与静的对比中展示出对生活的细腻感受,传递出生活的温暖意境。在顶部区域承载了搜索,扫码,天气,签到等诸多功能的情况下,达到了插图的体量感,区域信息传达效率,和优雅的平衡。
    梳理产品脉络,优化页面布局:除了顶部插画的升级,新版首页还加入了58同镇、同城部落、圈子等新功能,我们趁机对首页的布局进行整体的优化。
    旧版的视觉问题是分割线较多、渐变的区分方式使页面割裂感、拥挤感比较强,所以我们想用新的区分方式让页面更加整体、带来呼吸感。

    新版的页面区分和业务紧密集合,页面自上而下分别是分类业务导航区、内容模块区(部分还在灰度中)、拓展业务区(含到家和便民工具)、推荐区。这些大区域的区分方式我们保留了渐变,小模块之间我们使用了线条,使页面更有节奏,并提升了浏览效率,逻辑更加清晰化。

更多潍坊达内相关资讯,请扫描下方二维码

达内UI培训

上一篇:不同端的设计理念
下一篇:设计页面设置

马上预约七天免费体验课

姓名:

电话:

达内童程童美战略收购好小子,加码青少儿编程市场

UI设计用到的软件(一)

软件原型解析

使用配色来吸引用户注意力

选择城市和中心
贵州省

广西省

海南省

达内教育

有位老师想和您聊一聊