电商app设计页面实验，网页设计大作业 有关电商的4个页面要求DIVCSS
来源：整理 编辑：问船数据网 2025-01-25 11:25:29
1，网页设计大作业 有关电商的4个页面要求DIVCSS
自己找个精美的页面图片，然后DIV+CSS写一下就好了！这个都写不了那就跟没学一样网页链接我网盘里面有，你可以看下，前面这个链接点进去就可以了看了
2，电商APP首页设计终于有人讲明白了
移动端产品设计的难点在于在很小的屏幕上展示所有的业务。屏幕限制和移动端的客户碎片化阅读的习惯和高流失率。对于业务复杂的App产品设计难度更高。电商产品就是典型的复杂业务产品之一，是要展示内容最多、最难做的一类App。 电商APP首页设计结构 电子商务网站的首页是网站的形象页面，一个网站能否吸引浏览者留在该站中漫游，全凭首页设计效果的好坏。所以，首页设计对于任何网站都是至关重要的。 首页从根本上说，就是全站内容的目录，也是一个索引。一般的电商app都有页头、页中和页尾这3 个设计区： l 页头： 包括网站名称、搜索组件、焦点广告、导航等版块。 页头首先要体现网站主题。用企业名称、标语、徽号或图像概括地反映企业形象、经营理念和服务定位。搜索、导航提供了对关键页面的浏览链接，通过图标和文字表明产品其他页面载有的主要信息；用户能够在最短时间、最便捷的操作迅速地到达他们所需信息的其他页面中。 l 页中： 包括公告、最新活动、个性化产品推荐、友情链接等版块。 在首页上公告信息，到达率非常高。同时，产品中在进行的各种活动信息，也是吸引用户停留并购买的重要手段。随着互联网产品设逐步创新，数字化，原来千人一面的首页分类产品列表由简单罗列，变成了根据用户喜好和行为习惯进行个性化的商品推荐，产品变得更了解用户也更能触发用户购买行业发生了。 l 页尾： 包括版权、联络方式、计数器等版块。 版权的常见做法是在首页底部标示简短的声明，再用链接附带一个有详细使用条款的说明页面，既避免首页的杂乱又把重要内容说清楚了。页面底部的联系方式，方便用户与产品相关人员取得联系，让产品所属企业获得用户反馈。 页尾的内容在web端界面设计中是不可缺少的区域，但在移动端首页基本都被移到了”设置”中进行展示，这是由于移动端界面空间实在太少，而且移动端多以手式向上不断滑动查看新内容，造成页尾信息如果放在页面尾端查看十分不方便。 首页设计组件介绍 一、搜索栏 大多数用户发生购买行为有明确的目的性。我知道我想要买什么，所以我需要快速的搜到商品。因此App把最显眼的位置留给搜索栏。 一个完整的搜索组件设计应该由三个阶段组成： 1.找到搜索框 2.录入关键词 3.搜索结果展示 搜索框的设计需要注意： 电商App的搜索框通常放在界面的最上面，明显、惹眼，用户可以直接进入信息录入阶段。 电商App的首页搜索框，即使用户需要查找的内容属于不同类别，在设计上也最好给用户最简单的全站内容搜索组件。 搜索框的设计风格应该和整体产品风格保持一致 信息录入的设计需要注意： 提供多种信息录入方式，最常见的文字录入当然还是主流，除此之外最好可以提供语音、图片录入搜索等方式。 除了多样录入方式，还应配套提供信息录入提醒设计，如：用户历史搜索记录、搜索关键词热榜、录入关键词时联想响应 搜索结果的设计需要注意： 搜索结果设计重点在于展示不同类型和级别的内容。例如在淘宝搜索账单，结果包括账单相关信息，店铺和资讯等，不同独立应用加图标展示。不同内容类别以tab切换的形式展示。 搜索结果过多，可以加检索组件帮助用户在搜索结果中进行二次查找，减少花时间翻页或滑动查询。另外搜索结果为零的时的空页面，给用户设计合适的说明界面。 二、导航 电商App中，必不可少的两个导航： l产品主导航 l商品分类导航 产品主导航 电商App中的主导航设计为用户提供了跳转相对独立的信息内容的路径。例如： 淘宝的主导航项：淘首页、逛逛、消息、购物车、我的淘宝 京东的主导航项：首页、分类、发现、购物车、我的 发现、消息、购物车、我的这些内容之间没有很强的关联，但又是用户在电商平台购物过程中必不可少要查看的信息。 京东、淘宝主导航 同时，从“商品买卖”的业务角度来看，有几个重要的业务信息，无论做任何电商产品，都应该让用户可以快速、方便的查找到是毋庸置疑的。它们是： 1.用户的购物车---购物车模块 2.用户在产品的中的个人信息---我的模块 3.用户买卖过程中的交流信息---消息模块 这些重要的业务信息，多数都放在了电商App的主导航中，即使没有放在主导航，也一定能够在首页的副导航中看到。 商品分类导航 不同类型的电商平台，商品分类导航有一些区别。 如下图中淘宝、京东平台，这两个平台是成熟的综合电商平台，在平台中不但有各类第三方商品销售，而且平台也有自营的品牌和独立应用在平台内销售，如淘宝的天猫商城、饿了么、天猫超市；京东的京东超市、就东到家等。 因此，商品分类导航中的商品分类覆盖十分广泛，尤其商品分类导航的C位往往加入了平台自营的品牌和应用。 垂直类的电商App，商品分类导航中的内容覆盖面窄很多，以商品类型分类引导用户查找商品的特点更明显示。 例如下图中唯品会的商品分类导航，因为唯品会的产品定位在折扣女士用品，所以导航中的分类都集中在服装、鞋帽、箱包等商品类别。 另外，在设计上不像主导航设计需要控制导航项数量，商品分类导航中的分类项数量往往大于5个，因此使用双排、可左右滑动的拖拽导航几乎成为最常见的商品分类导航样式。 三、活动 电商产品中的活动类型很多，最常见的有16种： 1. 打折 2. 秒杀 3. 免单 4. 满减 5. 满送 6. 满返 7. 买送/捆绑 8. 搭售 9. 包邮 10. 好评晒图 11. 试用 12. 抽奖 13. 积分/会员 14. 团购 15. 预售 16. 众筹 在电商App首页，见到最多的是前两种活动：打折、秒杀。而且，首页的活动往往都带有极强的时效性表示，例如在规定的时间才可以享受更加优惠的商品价格。 因此，活动在首页上的设计要向用户传达三个要素，即用户最关心的： 什么时间有活动 有什么活动商品 活动的价格有多优惠。 如下图的“京东秒杀”的设计就非常完整的呈现了这3个要素。当然，并不是所有的活动表达都一定要遵循这一规律，淘抢购的设计就打破了3要素传达的规则，隐去了商品促销价格。 京东秒杀与淘抢购 四、商品推荐 个性化的商品推荐现在在电商App设计中己经十分成熟，推存商业最先被用户接触到的地方就是首页。 用户在电商App或有意、或无意浏览的商品，都会被产品记录下来。再由商品推荐模块根据你最近的浏览记录，推荐一些相关的商品、分享或者店铺。由于每个人关注的商品都不一样。所以产品对于每个人呈现的界面内容也都是不一样的。 例如下图，淘宝通过性别判断，如果产品发现你是男性用户，默认推荐“男神范”；如果判断你是女性用户，则默认推荐“爱逛街”。 淘宝内容推荐 不仅仅如此，用来展示电商平台每个细分商品品类推荐商品的区域，也都引入了个性化商品推荐的设计。 在使用全品类商品展示+优惠价格来打动用户进行消费的同时，现在的电商App往往会再融合情感因素、参考用户的特点、喜好展示各品类中最可能吸引用户的商品，促使用户在产品中“逛街、购物”。 例如京东精选中集合了全品类的商品推荐，以用户行为进行时实的个性化推荐。 案例：主流电商App首页分析 一、淘宝 首页内容： 1.搜索，淘宝把搜索二级页面关键词直接展示在一级搜索位置下方，相当于关键词搜索功能层级上升； 2.banner； 3.8个平台型导航，主要是从淘宝诞生，已经可以独立运营的产品； 4.活动广告位，占据banner大小的位置，平台活动快捷入口； 5.淘宝头条，根据分类滚动推荐产品的文章； 6.二级购物功能区，展示各个频道，如天天特卖，每日好店。 7.商品列表，安卓和苹果展示不一样。安卓每个版块半屏往下铺开。苹果是上方做了分类导航，下方列表。 二、京东 首页内容： 1.搜索； 2.8个banner； 3.活动广告位； 4.平台型功能区，有部分是独立的应用如京东生鲜，还有部分是京东的商品类别频道； 5.京东快报； 6.二级购物频道，放了些主推的购物板块； 7.活动板块，铺开了活动的每个类别； 8.频道推荐，把频道纳入到10个标签里，每个频道都有超过5个二级标签。 三、苏宁易购 首页内容： 1.搜索； 2.8个banner； 3.活动广告位； 4.平台型功能区，这一块主要是频道和分类，分类有16个。 5.苏宁头条； 6.二级购物频道； 7.活动板块，展开了活动的每个类别； 8.频道推荐，展示很多二级频道，分的特别细。 四、小米有品 首页内容： 1.搜索； 2.活动板块，动画展示活动的交互很新颖； 3.平台型功能区， 5个功能频道，销售榜单作为一个推荐功能很实用； 4.banner，共5张； 5.活动板块推荐，分了各活动分类的专场； 6.特色频道推荐，含榜单（把榜单部分商品展示出来）、限时购、年货节热卖、小米众筹、有货集市、品味生活，和功能区呼应，以商品展示为主； 7.类别频道推荐，每个展示一屏，以商品展示为主。 五、网易严选（自营平台） 首页内容： 1.搜索和导航； 2.Banner；严选没有功能区，直接开始推荐商品或者频道。 3.推荐标签的商品，焦点位给了个性化推荐，非常重视更精准得来个性化推荐； 4.VIP会员的服务特权，网易重点突出了这一块； 5.二级功能频道，只放了三个频道； 6.猜你喜欢。 六、网易考拉（垂直综合平台） 首页内容： 1.搜索； 2.banner； 3.品类场馆，像商场的楼层一样，逻辑清晰； 4.活动板块； 5.特色频道推荐，标签下面细分了很多相关的功能频道； 6.用户专享； 7.精选活动，以每个板块商品列表来展示； 8.个性化推荐，以三个角度列表展示。第一个角度是个性化商品，第二个角度度是商品推荐清单类文章；第三个角度是品质商品推荐。 七、拼多多（综合平台） 首页内容： 1.Banner； 2.功能区，所有的平台频道和分类功能都在这里面了，有16个，偏重社交分享，如拼团； 3.活动板块推荐； 4.商品列表展示，分商品和店铺两个角度推荐商品，穿插了一排品牌馆推荐。
3，高度灵活的电商APP首页怎么布局
混合式开发的优缺点大概如下优点：Android/IOS无特殊要求，可以基本实现一套代码，跨平台运行。本人参与过ionic构建商城的完整流程。在性能上，流畅程度，易用性等方面，见证ionic可以承担起商业软件的责任。插件丰富。基于cordova的插件几乎覆盖了原生APP的所有功能。学习成本低。html，js相对于java和oc来说更容易速成。学习周期短。（个人觉得AngularJS的学习成本也不低。）还有就是传统意义上的前端开发人员，也可以参与到APP的开发中。题注所言，关键模块可以在服务端配置。用户无需更新APP。缺点：坑特别多。如果是抱着节约成本的目的去用ionic，请将你的期望缩水50%。因为除了能节省wap移动网页版的开发成本，开发Android和IOS的开发成本几乎和填坑的成本相当。适配困难。单页面应用实际上就是把浏览器加壳。你需要适配浏览器工作很繁琐。IOS9上表现尤甚。
4，浅析电商网站产品页面该如何优化
电商网站产品页面进行优化，应该注意以下几个方面：1、产品要人性化分类 产品分类不仅要考虑到产品的专业分类，也要考虑到按照用户需求的分类。站在用户的角度，按照需求和功能进行详细的分类，不仅仅能吸引到用户，同时还能提高网站的用户粘性。2、产品单独做一个分类页面 对于行业网站来说，最好可以给每个产品单独做出一个分类页面，这样便于用户的查询和浏览，同时也对每个产品都做了专业的产品描述。不要小看产品描述，如果想在搜索引擎中取得一个好的排名，产品描述一定要突出产品卖点设计合理的关键词，使之成为独一无二的内容，有竞争力，对搜索引擎又友好。3、建立一个产品相关知识介绍栏目，不断收集关于该产品的知识丰富的网站内容不仅搜索引擎喜欢，而且也是吸引用户的亮点，更重要的是减少了跳出率，提高网站的用户粘性。同时可以使你的网站看起来更加权威。4、产品图片加上alt属性产品页主要以图文方式展示，而在SEO优化的角度来看，图片的优化结果并不明显，况且搜索引擎相对图片的辨认度还停留在以alt标签来判别的。自然在优化电子商务网站的产品页时，首先需求把每个图片都加上一个alt属性。5、内链结构要清晰电商网站的产品页只需把相关的产品、上下文衔接、推荐产品、热销产品、联络方式等相关的版块设置好就行了，同时也要保持页面结构的清晰。一、放入购物车按钮必须十分明显建议一：“放入购物车”按钮必须十分明显。如果在不破坏页面均衡美观的前提下，“放入购物车”尽量使用颜色突出的大按钮，如果是白底黑字，按钮可以用红色、黄色等比较有视觉冲击力的颜色。另外，购物车一定要让用户第一眼就看见，当用户阅读完产品信息想购买时，一定要让用户做到不必寻找购物车按钮而是直接打开页面后就可以看到购物车按钮。二、购物车按钮文字建议二：购物车按钮文字。对于购物车的按钮文字是可以千奇百变的，想用什么文字就用什么文字，但要注意这些文字一定要符合用户体验和起到转化率的作用。我们可以通过一些文字来做个实验，看看哪些文字的转化率是最高的，哪些文字的转化率是最低的。比如放入购物车、立即购买、购买、立即节省xx元。加入购物车、轻松购等，这些都可以尝试的去使用。三、随时放入购物车建议三：随时放入购物车。主要意思的是网站上应该有个方便用户随时把产品放入购物车的文字按钮，可以在产品介绍页面的最上端，如价格、型号、产品名称等，可以简要说明的旁边放上购物车的按钮，还可以在产品的描述结束后再次显示购物车按钮。四、编辑购物车建议四：编辑购物车。购物车一定要允许用户随时随地的编辑购物车内容和修改要购买产品的数量。如果产品还有颜色、尺寸等，也应该允许用户在购物车内直接进行编辑，而不是删除产品重新去选择产品的颜色、尺寸等放入购物车。目前的购物车都可以做到这个功能，所以就不多说了。五、随时随地查看购物车内容建议五：随时随地查看购物车内容。很多用户都喜欢在任何地方、任何页面上清楚的看到购物车内容，如果看不到购物车的内容，很多用户都会担心产品购买失败或重新购买等。目前很多电商网站都是用户主动点击购物车链接才能看到购物车中已经有的哪些产品，这种方式没有用户体验，也给用户增加了一个完全没有必要的点击步骤六、付款进程指示建议六：付款流程指示。用户在确认订单后并完成付款的过程中，页面应该清楚的显示这个几个步骤，比如检查购物车内容、注册或登陆帐号、确认订单、付款、购买完成等文字，并且通过箭头或不同颜色的字体显示出用户现在处于哪个一个步骤，让用户对接下来所需要完成的步骤和需要的时间有个心理预期。
5，移动电商app怎么开发的
第一步：制定解决方案一个移动电商app项目的开发首先要制定好整体方案，包括项目开发的规划、大体框架，也就是说首先要确立app产品原型，进入项目评估阶段，经过反复确认，最终形成产品脑图和完整的需求文档。百推宝融合移动电商、社群电商模式，独创移动社群电商的理念，聚焦大众创业孵化基地搭建、高端移动社群电商实战、智能移动社群营销工具开发等一站式移动社群电商解决方案业务，这就要求对如下几方面做调研：1、用户定位：移动电商app都需要有精准的用户定位，这个定位也就决定了这款app主要风格和带来怎样的用户体验。这就需要确定企业开发移动电商app所针对的人群。2、价值分析：一个受用户青睐的移动电商app是可以帮助用户解决问题的，因此，开发者在在制作的app过程中要更多的从用户的角度去思考，不能光是缩在自己的思维世界中去设计app软件。3、相关设计：一款新开发出来的移动电商app是否会引起用户的兴趣，首先要从设计上着手。简洁美观的app Icon设计可以让用户眼前一亮，吸引用户的眼球，简单便捷的操作是为用户带来良好体验并成为你的app忠实用户的关键影响因素。第二步：功能需求分析这一步主要是确定移动电商app的主要用户群体和功能实现，包括app大概界面的构思和设计，大功能模块的代码编写，UI、UE开始设计和形成初步的效果图等，在经过确认后界面的效果图正式设计完成，产品在设计图完成后，进入研发阶段，通过编程语言形成正式的程序。至此，App的开发过程就完成了一大部分。第三步：反复测试修改当移动电商app的大概界面和功能设计好后，App的大致demo就出来了，demo自己试用和体验几遍后，根据实际情况修改，没有大错误后，新版本可以尝试寻找beta用户， 根据测试用户的反馈，改进并反复测试。注意：用户测试阶段一定要把每个用户的意见考虑进去，不一定每个意见都会采纳，但是不要放过一点瑕疵，尽全力让自己的app更好。第四步：进入市场推广经过多次测试后的移动电商app就可以进入市场投放使用了，而市场推广是比较关键的一部，开发者就要通过各种方式推广自己的app产品，力求app在市场上获得更多的下载量，吸引更多的用户。在传统的互联网中，如何收集与分析数据，进行数据化营销以及数据化运营，都已经有较成熟的解决方案，市场上有很多第三方提供这样的服务，有商业的，也有免费的。很多公司内部开发的bi与日志分析系统功能也很强大。而对于移动互联网来说，大家都还处于摸索的阶段。我们“今夜酒店特价”也不例外，这里希望能跟大家交流一下这几个月来我们利用google analytics来进行数据化运营与产品设计的一些感受与心得体会。 如何获得数据 第一个问题，就是如何获得移动app的数据。这就涉及使用什么工具来获得想要的数据。相信很多跟我们一样处于初创阶段的公司或个人，都没有过多的精力来自行开发数据的收集与分析系统。这时候，我们就把目光投向了第三方免费的工具。相信大家都知道大名鼎鼎的flurry，以及国产的友盟。还有一个就是免费的google analytics，在收集和分析移动app数据方面，它非常强大。 经过综合分析与对比，我们最终还是决定使用google analytics来作为我们的数据分析工具。 选择好数据分析工具之后，第二步是如何正确地实施与部署google analytics。在这个过程当中，我们的体会就是，要用好google analytics来收集与分析移动app的数据，最重要的是利用好它的五个自定义变量以及事件追踪。比如可以把app的版本号作为自定义变量传回，这样你就可以很好地来细分不同的版本在转化漏斗上是否有明显的改进。而对于事件追踪(event)，我们把每个按钮的点击都作为一个事件发送回来。我们的产品经理可以明确地知道每个按钮每天有多少用户在点击，对于我们的产品改进也有非常大的帮助。n随着智能移动设备的更新换代，移动电商在电子商务中已慢慢占领主导位置，电商类App成为网上购物不可或许的应用软件。电商App看似简单，实则功能繁多，下面谈一谈开发电商类App必备的一些功能。 电商App展示在用户眼前的只是一个前台，但是有几人晓得，其实App的前台是远没有后台复杂，且依据不同的需求权限的后台，如一个B2C网站，假如提供入驻，就要做三个不同权限的后台，客户后台、入驻商家后台、管理员后台。然后台系统中又有三大体系：商品展现体系，会员管理及支付体系，其他辅助体系。 而在我们在前台可以看到的信息中，又必需包含以下几点功能：直接购置、新品信息直接推送客户、商品展示、用户珍藏、购物车、用户分享、评价、商品描绘、后台发布商品信息等。 而在用户、管理者后台可以看到的后台功能有：会员信息、编辑会员基本信息、查询订单信息、收货地址管理信息、收藏的商品信息、网站发的信息、结算系统、订单生成和结算界面、转支付宝接口支付、积分和优惠系统、经过积分系统、进行各类促销活动、增加客户粘性、提升二次消费。 而愈加强大的强大的移动云商城还包括：集微信商城、支付宝、手机触屏版商城、App商城和PC独立商城于一体圆满交融，同一后台统一管理，多商城商品、订单、会员数据完整云同步，协助商家快速完成移动电商和传统电商的双线规划。电商App具有流量分佣、注册分佣、订单分佣多方式推行分佣体系，整合PC端和移动端构成平面式多渠道推行生态圈，移动电商App开发十分重要。 有些开发商经常会以为开发一个商城App需求十万觉得十分的昂贵，但是你看完开发电商App的必备功能，还会有这样的想法吗?开发一个App需求几钱，完整取决于功能及客户请求，假如有需求高质量、又需求功能全，还需求价钱廉价根本是做不到的。如今应用市场上有大量的豆腐渣工程的App相继成为僵尸App。所以一定要选择好的开发商才是关键。第一步：制定解决方案 一个移动电商app项目的开发首先要制定好整体方案，包括项目开发的规划、大体框架，也就是说首先要确立app产品原型，进入项目评估阶段，经过反复确认，最终形成产品脑图和完整的需求文档。这就要求对如下几方面做调研： 1、用户定位：移动电商app都需要有精准的用户定位，这个定位也就决定了这款app主要风格和带来怎样的用户体验。这就需要确定企业开发移动电商app所针对的人群。 2、价值分析：一个受用户青睐的移动电商app是可以帮助用户解决问题的，因此，开发者在在制作的app过程中要更多的从用户的角度去思考，不能光是缩在自己的思维世界中去设计app软件。 3、相关设计：一款新开发出来的移动电商app是否会引起用户的兴趣，首先要从设计上着手。简洁美观的app Icon设计可以让用户眼前一亮，吸引用户的眼球，简单便捷的操作是为用户带来良好体验并成为你的app忠实用户的关键影响因素。 第二步：功能需求分析 这一步主要是确定移动电商app的主要用户群体和功能实现，包括app大概界面的构思和设计，大功能模块的代码编写，UI、UE开始设计和形成初步的效果图等，在经过确认后界面的效果图正式设计完成，产品在设计图完成后，进入研发阶段，通过编程语言形成正式的程序。至此，App的开发过程就完成了一大部分。 第三步：反复测试修改 当移动电商app的大概界面和功能设计好后，App的大致demo就出来了，demo自己试用和体验几遍后，根据实际情况修改，没有大错误后，新版本可以尝试寻找beta用户， 根据测试用户的反馈，改进并反复测试。 注意：用户测试阶段一定要把每个用户的意见考虑进去，不一定每个意见都会采纳，但是不要放过一点瑕疵，尽全力让自己的app更好。 第四步：进入市场推广 经过多次测试后的移动电商app就可以进入市场投放使用了，而市场推广是比较关键的一部，开发者就要通过各种方式推广自己的app产品，力求app在市场上获得更多的下载量，吸引更多的用户。福建蜂鸟云商为您解答！
文章TAG：
电商app设计页面实验电商 app 设计
