电子商务React-Native牛刀小试仿京东砍啊砍砍至您手软

5、总结建议

出品稳定上,有货定位是“潮流资讯及电商平台”,依托yoho潮流媒体的大方的用户也那提供了大气之流量,但当App上却以重点放置于“电商”上,缺乏对用户的“潮流意识”的塑造。

市面环境达到,有货的商海细分小众化,同类竞争产品较少,产品之竞争力比较高,但假如警醒大众电商市场的竞争。

商业模式上,有货App的重大呈现方式是透过电商的交易,变现模式单一。

你好, React Native

在上马编制这demo之前我们先行创造一个简单易行的Hello
World项目,用你喜欢的文本编辑器(例如Sublime Text)打开index.ios.js
,删除所有情节。然后进入以下语句:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Text,
  View,
} = React;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <View>
        <View><Text>你好, React Native</Text></View> 
      </View>
    );
  }
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

哼了,“Hello World” 的示范就顶之结束;接下我们只要编制一个的确的React
App了!

3、用户分析

构建砍啊砍List页面,从网获取数据,绘制table绑定事件

4.2.1、进入App

进入App

优点:

登App,出现右图所出示之界面,用户因自己性质和需要选择相应之导航栏,满足用户的个性化需求。

缺点:

整整页面分为【男生】、【女生】、【潮童】、【创意生活】四个导航栏,其中前面三者是因用户属性来安装,第四单是冲产品性能与用户要求来安,用户进入App,在高效浏览后会默认是为用户属性来划分的,因此前三者的点击量超过第四只。四只导航而装以联名,会多用户之就学变成,也加码了空中。

建议:

失掉丢【创意生活】的导航栏

4.2.1.1、注册登录功能

报登录界面

优点:

①签到方式多样,由App账号(手机号/邮箱)、第三着账号(QQ/微信/微博/支付宝)登录,满足用户多种登录方式的急需,提高用户的利用频率。

②登记方式呢主流的手机号验证注册,简单高效。

缺点:

①报入口不明白(位于页面底部)

②登载录框包括手机号和信箱,但在登记时也仅生部手机号报一栽方法。

③每当用户用都注册的无绳电话机号进行双重报了名时,系统只显示“此账户已在”,未带用户展开直接登录。

建议:

①将第三方登录方式下调,设计来同【登录】一样的按钮放置于【登录】按钮下方。

②挂号方式多【邮箱注册】功能,可默认为【手机号报】

③以系统检测到用户在对曾经注册之账号进行再次报了名时,出现弹框“‘此账户已存在’—{现在报到}/{忘记密码}/{输错账号了}(选项)”用户可摘{现在报到}跳反到登录页面、选择{忘记密码}跳反至找回密码页面、选择{输错账号了}关闭弹窗,从新输入。

React-Native基础教程

*React-Native基础篇作者git

*React-Native官方文档

*下载本教程demo

几乎单月前facebook推出了React
Native框架,允许开方下javascript代码来贯彻iOS原生的下,随后十月份安卓版的也罢相继问世,从此我们可优雅的Learn
once, write anywhere…

早以几乎年前开发者就开采取javascript+html和PhoneGap来编排各式各样的app了,开发者可以优雅的做到同样效仿js的shell,然后分别以不同的阳台下进行包装,最终生成不同平台的app,知识app的结尾的表现形式还是html类型的。一度曾经出现webapp
是否如代表native ,这么多年过去,结果大家吧不言而知了。

可是react native的确是一个大巨大的东西,开发者们都按捺不住也底欢呼,react
native所见出的行使实质上是native应用,开发者完成同样学js代码,分别以iOS和安卓平台下分别打包最终分别能映射生成分属不同的安卓原生应用和iOS原生运用,这个优势恐怕是目前为止被大开发极喜爱的地方,一直以来web
app最为大家所诟病的或是就是html的页面永远无法与原生页面的心得相比起。

  • 通过react
    native框架,你可以用JavaScript来修和运转应用程序逻辑,而UI却得以是真的当地代码编写的,因此,你完全无待一个HTML5修的UI。

  • React框架下了同等种植时髦的、激进的同冲天函数式的不二法门来构建UI。简单说,应用程序的UI可以大概地用一个函数来代表应用程序当前之状态

    React
    Native的显要是管React编程模型引进及移动App的开中错过。它的目的并无是超越平台,一糟编写到处运行。它的确的对象是“一潮上多处在编写”。这是一个着重的分别。本课程只干iOS,但要你学会了其的想想,你虽可快捷将一如既往的文化应用到Android
    App的编辑上。

    React
    Native的编制模式更加友好于事于js的前端开发者,它本身采用了React
    js的模式,尤其是从事React
    js的开发人员,只待熟悉下中心的文档就能够瞬间成一个iOS+安卓双向通吃的运动专家,React内部引入可有的新的概念,如
    DOM和reconciliation,React直接以函数式编程的见解下了UI层面。
    但是相对来说,OC的开发人员只要熟悉一下基本demo看上几乎单例子应该就是非会见生出太多问题了,如果前有过web端开发经历的说话相信上手会再度快有。

下面介绍一个略的demo操作,这个课程一起带您失去体验一下京东促销砍啊砍页面的OC->React
移植过程,通过本学科你便足以了解React Native的有的中心开销流程了。
效果:

react-native-01.png

假若你之前没写过其他 JavaScript
,别担心;这篇教程带在你一点一点编制代码。React 使用 CSS
属性来定义样式,这些体通常还深爱阅读和掌握,但是如果您想越了解,可以参见:。
要是想深造又多内容,请为下看

2.2、产品一定

劳务被潮流人群的潮流资讯和B2C电商平台

开始

React native 关于环境搭建问题此处即无多说了,详情请见React
native基础教程,此处就从咱已经准备好一切前序工作初步,万事具备只欠东风,下面开始:

首先React Native 启动画面开始,创建helloworld工程,启动画面如下:

ReactNative-Starter.png

并且Xcode还会打开一个终极窗口,并显示如下信:

termial.png

眼看是React Navtive
Packager,它于node容器中运行。你待会就见面发觉其的用途。
绝不要关是窗口,让她一直运转在背后。如果你想不到关闭它,可以以Xcode中优先罢程序,再又运行程序。

注意:
于起来接触实际的代码之前(在本教程中,主要是js代码),我们以引进
Sublime
Text这个文本编辑工具,因为Xcode并无切合用于编写js代码的。当然,你呢得以用
atom, brackets
抵其余轻量级的家伙来顶替。

React
Native就的js完成的代码其实是跑在当地的node下面的,从appdelegate里面可以观看React
Native工程会由一个本机地址“http://localhost:8081/index.ios.bundle?platform=ios&dev=true”读取一个应和的文本,这个文件被便是系已自行帮您于包压缩成了以后的一个js
代码库,接下React
Native引擎会将是库房中的js代码完全的剖析、翻译成对应之iOS原生内容,最终因为iOS原生UI的款型渲染到桌面上,这个就是是React
Native整个办事流程。

4.2.5、购物车功能模块

【购物车】

优点:

①买进物车整体来讲简约整齐,下方安装【为公优选新品】可以促使用户进行第二潮花。

②置物车显示商品的品牌、颜色、尺码、价格抵必要信息,利于用户进行重复确认。

缺点:

①购物车内少对和种品牌之归类,无法满足用户的“品牌意识”需求。

②货详情缺乏“库存”或“销量”等消息。

建议:

①针对与种品牌之商品进行分类显示。

②货品详情增加“库存”,采用饥饿营销的方法,或者多“销量”以达成推进用户买行为的转账。


4.1、产品结构图

发货App产品结构图

由活结构来拘禁,有货App主要是因为首页、分类、逛、购物车、我的立即五单一级功能整合。整体而言结构清晰,凸显出“潮流电商”的活一定。

初始化数据源

getInitialState:function(){
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      return {
        dataSource: new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        }),
        loaded:false,
        currentPage:0,
      };
    },

getInitialState:function()类似于OC中之init函数,我们一般的惯好当init函数初始化一个变量等数码,在React
Native依旧是这般。

3.2、用户特征

用户年龄、性别比例(数据来:百度指数)

人群画像:

年要汇集在20-39年

性别比例达到男性超过女,男性占到7改成以上。

人群特点:

不无好奇心,爱好潮流,喜欢异的风格,

针对在品质有较高的追,爱好小众品牌,具有

品牌归属感,对价格不灵敏。

构建cell

    _renderRow:function(data,sectionID,rowID){
    return (
      <TouchableHighlight onPress={() => this._pressRow(data,rowID)}>
      <View style={{backgroundColor:'white'}}>
        <View style={{width:375,height:150,flexDirection:'row'}}>
          <View style={{flex:2,borderColor:'green',borderWidth:0.5}}>
              <Image style={{width:125,height:125,margin:10,borderWidth:0.5,borderColor:'#97979A',borderRadius:2}} source={{uri:data.img}}></Image>
          </View>
          <View style={styles.row,{flex:3,borderColor:'blue',borderWidth:0.5}}>
            <Text style={{marginLeft:20,fontSize:18,color:'black',height:84}}>
              {rowID+'-'+data.wname}
            </Text>
            <Text style={{marginLeft:20,fontSize:14,color:'black',marginTop:10}}>京东价318.00</Text>
            <View style={{marginLeft:20,width:100,borderWidth:0.5,borderColor:'red',borderRadius:1}}>
            <Text style={{fontSize:12,color:'red'}}>已有256人砍价</Text>
            <Text style={{fontSize:17,color:'white',backgroundColor:'red',textAlign:'center'}}>马上砍</Text>
            </View>
          </View>
        </View>
          <View style={styles.separator} />
      </View>  
      </TouchableHighlight>
      );
  },
  _pressRow: function(data,rowID) {
    this.props.navigator.push({
      component: detail,
      passProps: {data: data}
    });
  },

每当上述初始化ListView UI的时空,我们指定了renderRow
对应之action事件,此处我们得以直接当_renderRow:function中构建和谐的cell模版,至于React
Native中UI的竹签基本用法,大家可去头基础教程里面找,有接触类似于html标签,总的我们当_renderRow:function纯碎是布局cell的代码,这个近乎于tableViewCell
subClass, cell点击事件我们应用一个TouchableHighlight来代替

 <TouchableHighlight onPress={() => this._pressRow(data,rowID)}>
 ....
 </TouchableHighlight>

TouchableHighlight事件处理action同样是一个函数(不解释),在_pressRow事件中我们处理好之cell点击跳转,顺便插一句子下同样步的操作,_pressRow(data,rowID)是含形参的
除此以外 ListView renderRow
事件的重载函数,形参类型这个实际参照面子谱官方的api

_renderRow:function(data,sectionID,rowID)。

整运行效果如下:

react-native-02.png

2、产品概述

创造一个导航

夫demo使用了专业的UIKit中之导航控制器来供”栈式导航体验“。接下来我们即便来兑现这功能。

当 index.ios.js, 添加以下代码:

var Home = require('./cut/Home');

var HelloWorld = React.createClass(//{
  render: function() //{
    return (
      <NavigatorIOS 
             initialRoute=//{//{title:'首页',
                        component:Home,
                      //}//}//>
    );
  //}
//});

NavigatorIOS就是React
Native中对应之导航视图,我们再度暂时可以掌握就是是iOS中的UINavigationController,我们以此创建了一个冲导航的视图控制器,rootViewController对应的页面就Home。

5.1、如果本身是PM

l增强产品之潮流资讯传播效应

①当首页增加推送“潮流资讯”内容,培养新用户的“潮流意识”

②于【话题】、【搭配】、【潮人】板块下多筛选功能,如:{最新}、{最热}、{推荐}等,满足用户的针对潮流信息的个性化需要,培养用户之“潮流意识”,提高用户留存率

l提高产品之张罗功能

①【ShOw】功能模块下加文字、短视频分享与评价和收藏(可选用为“…”)功能,提高用户之互动性。

②二级功能模块【逛】板块下之各个信息卡增加{精选评论},将点赞功能置于每个信息卡底部,用户不必点进去才能够进行接触许。

③每当一级功能【逛】下增加二级功能{附近},可查看附近的潮人及潮流社区,将社交引导及线下。

l增进产品的显现能力

长“会员积分”功能,用户通过付款可提升不同等级会员,享受免邮费、积分兑换、资讯(晒单)排名靠前相当不同优惠水平之服务,提高产品表现能力。

倡导网络要,获取数据,缓存在全局变量List中

//定义request url 
var urlPath = 'http://ccguo.gitcafe.io/cut.json';
var CACHE = [];

//componentDidMount:function  系统方法
componentDidMount:function(){
        this.fetchData();
    },
//自定义函数处理网络获取数据,将数据放入全局变量CACHE
    cache:function(items){
      for (var i in items) {
        CACHE.push(items[i]);
      }
      this.setState({
               dataSource: this.state.dataSource.cloneWithRows(CACHE),
        });
    },

//发起 网络请求,获得json
    fetchData:function(){
      console.log('hello world');
        fetch(urlPath)
          .then((response) => response.json())
        .then((responseText) => {
          console.log(responseText.cutList);
          this.cache(responseText.cutList);
        })
        .catch((error) => {
          console.log(error);
        });
    },

这个过程模拟了在iOS原生应用里面,初始化网络request,发起网络请求,得到数据,解析数据,然后将数据存入list这一些列操作,其实在js中,js脚本处理json的能力还是很强的,我们再也不需要像OC中哪些objectForKey:的操作了,我们不需要任何MJExtension、JSONModel、 Mantle等一些潜在的工具了,省去了很多的麻烦,我们直接拿到一个json对象,直接对对象进行操作。

另外React的网络请求此处我们只是使用了fetch API

面子谱官方的api(脸谱对于网络要提供了多API,如:fetch
WebSocket XMLHttpRequest等,具体而参照API)

从代码上看js的链式编程刚看上去有点不太习惯,不过整体使用起来还是比OC中快捷多了,foreach遍历、消息队列进出栈,总之脚步里面省去了以往还不得不在意的好多麻烦,其实这块相对swift而言,新的版本中渐渐的已经得到了部分提升,不过还是要感谢脸谱团队,没有他们,可能还见识不到React的强大。

3.1、用户群体

喜好潮流的年青群体


4.2.4、社交与新闻模块

应酬和新闻模块主要汇集在【逛】这同样功能模块下,主要不外乎“逛”和“ShOw”两个模块,其中“逛”主要是潮流资讯的享用,“ShOw”主要是用户社交化的图形信息分享(用户晒单)。

4.2.4.1、逛

【逛】

优点:

①作用分类丰富,满足用户的多样化要求。

②每一样首文章还有所点赞、收藏、评论以及分享功能,将社交化思维融入进,满足用户的张罗需求,增加了用户粘性。

③于篇章最后根据文章内容有相关品牌和连锁文章援引,同时拥有至关重要词标签,用户可点击阅读有关消息,体现了活电商+资讯的产品特征。

缺点:

①当“逛”的首页,每一样首新闻的社交功能按钮(收藏、分享)不显,且默认排序是比照日各个,缺乏排序筛选标准。

②分开享功能未答应设置于各国一样首新闻的底色,因为用户还无详细阅读资讯的景象下好少进行分享动作,最多或者是沾赞。

建议:

①“逛”的首页,每一样首新闻底部去除“分享”按钮,改化“点赞”按钮,并鼓起社交按钮。

②首页长排序筛选标准,可随“最新”、“热门”、“推荐”进行筛。

4.2.4.2、ShOw

【ShOw】

优点:

①经用户晒单,使得商品进行了第二破传播,将社交化融入电商之中。

②而晒单者作为内容之生产者,当得他人的“赞”时,从而达到自我价值之落实,利于用户粘性的栽培。

③用户当见到人家的分享(晒单)后,可点击标签上商品详情进行选购。

缺点:

①集团到按钮只发点赞和分享两栽,缺少评论和储藏按钮。

②分享按钮是“…”,与前的按钮无合并,容易使用户误解。

③用户晒单时才发生图表而缺乏文字,不便利用户之间的交流性的升迁与其他用户对货的问询。

建议:

①日增评论和储藏按钮,可与享受按钮一连而选用为“…”

②增文字和短视频分享功能,用户晒单是不过自行选择。

布局顶部bunner动画图

轮播图这个地方用了React Native的一个叔着库swiper(偷懒了),

var Swiper = require('react-native-swiper');
初始化数据
var sliderImgs = [
    'http://m.360buyimg.com/mobile/s725x175_jfs/t2332/80/701506039/111191/37a1273/5624850bN2469d61f.jpg',
    'http://m.360buyimg.com/mobile/s725x175_jfs/t2401/354/694665708/117887/3a283185/56248ee2N58518e76.jpg',
    'http://m.360buyimg.com/mobile/s725x175_jfs/t2506/269/651438394/152836/cf430d42/561f6b3aN80cb83f4.jpg',
    'http://m.360buyimg.com/mobilecms/s750x410_jfs/t2326/263/687562306/170970/c3f92c7/5620cbddNaa6a2cda.jpg!q70.jpg',
    'http://m.360buyimg.com/mobilecms/s750x410_jfs/t1891/237/637408747/193879/1acee0f7/5620be19N801621e4.jpg!q70.jpg'
];

//初始化UI
render:function () \\\\\\\\{
        return (
            <View>
                <View>
                    <Swiper style=\\\\\\\\{styles.wrapper\\\\\\\\} showsButtons=\\\\\\\\{false\\\\\\\\} autoplay=\\\\\\\\{true\\\\\\\\} height=\\\\\\\\{150\\\\\\\\} showsPagination={true}>
                        <Image style={[styles.slide,]} source={{uri: sliderImgs[0]}}></Image>
                        <Image style={[styles.slide,]} source={{uri: sliderImgs[1]}}></Image>
                        <Image style={[styles.slide,]} source={{uri: sliderImgs[2]}}></Image>
                        <Image style={[styles.slide,]} source={{uri: sliderImgs[3]}}></Image>
                        <Image style={[styles.slide,]} source={{uri: sliderImgs[4]}}></Image>
                    </Swiper>
                </View>

                <View style={styles.listViewSuper}>
                    <ListView style={styles.tableStyle}
                        dataSource = {this.state.dataSource}
                        renderRow={this._renderRow.bind(this)}
                  pageSize={5}
                  automaticallyAdjustContentInsets={false}//>
                </View>
            </View>
            );
    },

又察看render:function()这个函数,应该无那么陌生了吧,暂时可以领略render相当于ViewController中的ViewDidLoad:,我们一般在render里面做一些初始化UI视图的干活,此处我们初始化了swiper和ListView

swiper

  • showsButtons (bool) 是否出示左右切换按钮(显示两单按钮左切 友切)
  • autoplay (bool) 是否打开自动播放
  • height (bool) 高度(不解释)
  • showsPagination (bool) 是否出示pageControl

ListView

  • dataSource 绑定数据源
  • renderRow cell绑定函数事件(等价于tableView:cellForRowAtIndexPath:)
  • automaticallyAdjustContentInsets UI布局相关的

2.4、产品特性

l长的潮流品牌以及项目

汪洋有些众化的潮流品牌入驻以及长原创设计之潮流品牌,全球化的供货渠道,丰富的出品线。

l强硬的流量入口

寄托权威的平面媒体《YOHO!潮流志》和活泼度非常高的YOHO/CN首席年轻态网络社区,短期内也出货App带来大气的流量。

l潮流资讯传播平台

民俗的潮流媒体基因与该精的内容生产能力,社交化的融入,促进了潮流资讯的丝达传出,提高了用户粘性和留存率。

React-Native牛刀小试仿京东砍啊砍砍至公手软

4、产品分析

对接下去做啊

恭喜你,你的率先只React Native
App终于成功了!你可当GitHub上找到每一个”可运行的“步骤的品种来文件,如果您行不肯定的时段它会杀实惠的
:]

苟您自Web领域,你恐怕当当代码中用JS和React框架建立因本地化UI的App的界面并实现导航而大凡小菜一碟。但如若您要开支的凡地方App,我要你可知从中感受到React
Native的独到之处:快速的App迭代,现代JavaScript语法的支持与明晰的CSS样式规则。

以您的生一个App中,你是碰头用这个框架,还是会连续顽固地行使Swift和O-C呢?

凭你怎么选择,我还盼您能自本文的牵线中上学到有的有趣的初东西,并把中有法则应用至您的生一个种遭到。

若你生其他问题和建议,请与届下面的座谈中来!

4.2.2、首页

活首页

优点:

①篇页在功能模块分类较多,满足用户的又急需。

②首页采用最展示的办法,为用户推送热门的潮流品牌以及项目,满足用户“边转悠边打”的需。

缺点:

①篇页中成效导航较多,增加了App的贮存空间,提升了用户的攻成本。【全部分类】(处于二级导航)与底部导航中的【分类】(处于一级导航)重合;首页中【潮流优选】、【明星原创】、【全球采购】与抽屉栏有重合;抽屉栏中之【逛】与底部导航【逛】重合。

②banner导航中点击“圆点”,图片未跟移动。

③找寻效果未显,不可知于好满足用户的快筛功能。

建议:

①以首页正中导航中错过丢【全部分类】、抽屉栏中失去丢【潮流优选】、【明星原创】、【全球采购】和【逛】的作用,节省空间。

②修复banner导航BUG

③搜功能电子商务改变成为搜索框,置于banner导航上部,直观明了。

缔造rootView Home,添加Home.js 文件,添加代码如下:

var cutList = require('./CutList');
var Home = React.createClass({

    render:function (){
        return (
            <TouchableHighlight onPress={()=> this.goToNext()}>
            <View>
                <Text}>go to cut</Text>
            </View>
            </TouchableHighlight>
          );
    },

    goToNext:function(){
        this.props.navigator.push({
            component: cutList,
    });
    },
});

Home 我们无非放了一个按钮,按钮文字“go to
cut”,另外上加了一个点击触摸事件,事件相应题是goToNext:function();
在函数处理事件内部,我们就做了页面的push跳转,目标页面是cutList页面,运行效果如下:

react-native-00.png

2.3、产品slogan

潮流购物,“逛”不停止

  • iOS
  • React-Native
  • 电子商务
    原稿地址

1、前言

产品名称:有货App               产品版本:v4.8.1

操作系统:IOS7.1.2              网络环境:wifi

体验日:2016/8/12          手机型号:iphone4s

拍卖cell跳反事件

var detail = require('./Detail');

 _pressRow: function(data,rowID) {
    this.props.navigator.push({
      component: detail,
      passProps: {data: data}
    });
  },

React在处理事件跳转的工夫,仍旧以进栈出栈的款型,这或多或少暨Apple的见地还是类似的。

  • component: 参数对应将要跳转的目标页面,
  • passProps:
    传参字典,内部也key-val形式,相当给一个容器,到了目标页面后得以因key从容器中取出传递的价值。

2.1、产品简介

有货网是依托YOHO社区所支付的B2C网络商城,致力为做中华尽充分之纱分销B2M(Business
to
Marketing,指为合作社供网络营销托管的电子商务服务商)商圈,是目前华夏极其老的兴品牌网络销售平台。

生货App是网下的无线端产品,主要也青春受众提供不同类别的潮流产品以及潮流资讯服务。

博页面跳转时间容器被的价

<Text style={styles.view}>{this.props.data.wname}</Text>

到了目标页面后,我们一直由props容器直接冲key就会拿传递的参数去处,此处我们传递参数的自我是一个json,我们只是讲wname显示到detail页面。
功效如下:

![react-native-01.png](http://upload-images.jianshu.io/upload\_images/664426-914333aee7cd22ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4.2.6、产品使用流程

出品应用流程

优点:

①打产品以流程来拘禁,从用户选中心仪的成品及终极落得交易要7步,流程比较丰富,但是可中国用户以进行交易时得严谨的特质。

②止装“加入购物车”按钮,使得用户定程度达避免冲动消费与冲动消费带动的大方“退款退货”的麻烦。

缺点:

①货物详解界面缺乏“在线咨询”的功用,无法充分满足用户线下购物的感受。

②请勿设置“现在购置”增加了有些用户之市复杂度。

建议:

①增“现在购入”按钮,可以来得灰色。

②货品详情增加“在线咨询”功能。

title: “React-Native牛刀小试仿京东砍啊砍砍至你手软 “
subtitle: “React-Native牛刀小试仿京东砍啊砍砍至你手软”
date: 2015-10-29
author: “Scenery”
tags:

4.2、产品体验

出品小白第一破作文产品体验报告,恳求批评指正!

4.2.3、电商模块

由漏洞百出到右依次是:商品筛选目录(抽屉栏)、有搜素进入商品列表、由【分类】进入商品列表、由其余渠道上商品列表

优点:

①用户进入商品列表的沟渠入口较多。

②商品筛选的条件比丰富,包含7独维度,同时持有‘长尾关键词’筛选标准

缺点:

①在筛标准中之【性别】选项,系统并未记住前用户的挑,而是默认‘全部性’

②起不同渠道上商品列表的筛选标准是未合并的(如达到图所示)。

a、由【分类】导航上的兼具长尾关键词、商品特性和罗目录(抽屉栏中)三栽筛选标准

b、由【搜索】进入的出搜索框、长尾关键词少只筛选标准

c、由外渠道上的发生长尾关键词与罗目录(抽屉栏中)两栽筛选标准。

建议:

①罗标准被性别默认成用户之前的精选项。

②联结不同渠道入口下之货列表筛选标准:长尾关键词,筛选目录(抽屉栏中),商品属性。

4.3、产品视觉设计

①产品主要调性为“时尚潮流、简约淡雅”,符合产品一定。

②产品Tab的主色调根据用户之例外性质主要为黑色(男性)、粉红色(女性)、青色(潮童)以及灰色(创意生活、奥莱)。产品风格及具有差异化,符合不同用户之思维诉求。

③UI设计及总体设计精致,排版整齐,风格统一,但字体,粗细不统一叫看上去有些糊涂。建议针对性字体进行统一化。

3.3、使用状况

①自己是一个欢喜潮流的人,每天走路,吃饭时会打开有货App,去逛逛一转悠,看到好的衣裳,物品,我会先放置购物车里,货比三家后再次购入合适的,我还见面看关于潮流的讯息,服饰搭配等,让好更为新潮。

②自家是一个潮流的重度“患者”,我会经常打开有货App,去浏览有关“潮流”的消息,对它们上评论以及分享并希望获得支持(点赞),看到新奇的衣裳及物品,会如发现新地一样,立刻进下来,并和周围的口失去享受。

Leave a Comment.