设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 网页设计 > 四类官网原型设计及模板奉上,助你创意泉涌!

四类官网原型设计及模板奉上,助你创意泉涌!

Anne
2018-09-14
288075

官网的定位

在设计官网原型前,首先需要结合企业业务确定官网的定位,以产品销售为主,还是以企业品牌形象展示为主。比如,滴滴业务的应用场景是手机端,那么官网主要以品牌形象展示为主;小米官网则以产品销售为主。

官网原型定位

本文将从电子商务类、轻博客类、设计资源类、工具/软件类等几个方面来为你提供官网原型设计灵感和原型模板下载。

电子商务类官网原型模板

1、Globalsources-环球资源

电商类官网原型设计

环球资源是多渠道B2B媒体公司,致力于促进亚洲各地区的出口贸易。公司的核心业务是通过一系列英文媒体,包括环球资源网站、印刷及电子杂志、采购资讯报告、"买家专场采购会"、贸易展览会等形式促进亚洲各国的出口贸易。

原型下载地址: https://www.mockplus.cn/sample/post/686

电子商务网站作用


随着互联网的迅速普及,企业的官网无可争议地成为企业开展电子商务的最佳平台。一个成功的电子商务网站能够大幅度提高企业的竞争力,具体作用如下:

l 有利于提升企业形象;

l 可以与客户及潜在客户建立商业联系;

l 可以全面详细地介绍企业及企业产品;

l 可以缩短通信、广告、管理等费用,降低经营成本;

l 利用官网可以及时得到客户的反馈信息。

2、Shopify-跨境电商平台

跨境电商官网原型设计

原型下载地址:

https://www.mockplus.cn/sample/post/691

Shopify是一个SaaS领域的购物车系统,适合跨境电商建立独立站,用户支付一定费用即可在其上利用各种主题/模板建立自己的网上商店。

电商网站系统性能要求

在官网上进行商品交易,不仅要有大数据处理能力,还要保证数据的安全性。

l 安全性-用户信息和账号的安全性;

l 可靠性-简单流畅的购买流畅,促进销售快速实现和冲动型消费;

l 可扩展性-强大的搜索查询功能,方便用户快速查看和购买所需产品。

3、Chanel- 香奈儿

香奈儿官网原型设计

原型下载地址:https://www.mockplus.cn/sample/post/1015

香奈儿(Chanel)是一个法国奢侈品品牌,该品牌产品种类繁多,有服装、珠宝饰品及其配件、化妆品、护肤品、香水等。该品牌的时装设计有高雅、简洁、精美的风格,曾在20世纪40年代就成功地将“五花大绑”的女装推向简单、舒适的设计。

企业官网原型设计功能模块


企业官网原型设计并不是简单的堆砌,其构建是为实现企业的商业目标服务的。一个优秀的电子商务网站需要具有以下功能模块:

l 企业形象宣传;

l 产品和服务项目展示;

l 商品和服务订购;

l 转账、支付与运输;

l 信息搜索与查询;

l 客户信息管理;

l 销售业务信息管理;

l 新闻发布、供求信息发布等。

4、IKEA-宜家家居

宜家家居官网原型设计

原型下载地址:https://www.mockplus.cn/sample/post/1046

宜家(IKEA)是瑞典家具卖场。是一间跨国性的私有居家用品零售企业。宜家家居在全球多个国家拥有分店,贩售平整式包装的家具、配件、浴室和厨房用品等商品,目前是全世界最大的家具零售企业。

5、国内优秀电商网站

国内电商网站原型设计

国内优秀的电商网站,大家都比较熟悉,这里就不过多介绍,直接提供原型下载地址:

聚美优品 https://www.mockplus.cn/sample/post/1051

美丽说 https://www.zcool.com.cn/work/ZMjk4NjEzMDA=.html

天猫 http://www.ui.cn/detail/381121.html


电商类官网原型设计注意事项:

在电商类网页原型设计中,需要注意主题配色方案的选取,比如红色可以突出网页的促销信息。官网原型设计上,需要注意:

l 突出网站特价/特色/最新产品,鼓励和刺激用户购买;

l 是否添加醒目且极具诱惑的CTA按钮,引导用户购买;

l 是否添加用户评论或专家评分模块,为用户提供参考;

l 网站整体设计是否直观简洁,尤其是导航的设计,方便用户以最短时间查找所需内容;

l 结合节日或促销季特色进行设计,增加网站吸引力和表现力。


博客类官网原型设计模板

1、Tumblr-全球最大的轻博客网站汤博乐

博客类官网原型设计

原型下载地址:http://www.ui.cn/detail/393946.html

Tumblr(中文名:汤博乐)是目前全球最大的轻博客网站,也是轻博客网站的始祖。Tumblr是一种介于传统博客和微博之间的全新媒体形态,既注重表达,又注重社交,而且注重个性化设置,成为当前最受年轻人欢迎的社交网站之一。

设计资源类官网原型设计模板

1、Dribbble

设计资源类官网原型设计

原型下载地址:https://www.mockplus.cn/sample/post/905

Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

Dribbble的作品整体质量非常高,许多摄影师、设计师和其他创意产业人士都喜欢在这里展示其未完成的设计,通过与其他设计师的共同探讨来激发自己的灵感。

2、Behance-展示和发现创意作品

设计类官网原型

原型下载地址:https://www.mockplus.cn/sample/post/902

3、Pexels-高端图片下载平台

图片素材类官网原型设计

原型下载地址:https://www.mockplus.cn/sample/post/906

设计类网站设计技巧总结:

• 利用视觉滚动差或渐进式设计等技巧,提升界面的视觉效果

• 添加动态背景或视频设计,增强页面视觉表现力

• 添加对称或不对称网格设计,以更加多样的方式展示作品,提升页面活力


工具/软件类官网原型模板

1、Amcharts-图表组件开发工具

工具类官网原型设计

原型下载地址:https://www.mockplus.cn/sample/post/915

2、Taskade-在线任务清单工具

工具类官网原型设计

原型下载地址: https://www.mockplus.cn/sample/post/664

工具类官网原型设计技巧总结:

• 添加更加吸睛实用的微交互设计,提升用户停留和购买的可能

• 为页面按钮、图片或文字添加独特的悬停特效

希望本文提供的四大类官网原型设计技巧和原型模板下载能给你带来帮助。


相关推荐:

12个最佳的响应式网页设计教程,轻松带你入门!

中小企业网页设计,轻松拓展网络市场

2018最新优质电商网站模板,没有比这儿更靠谱了

2018年最值得关注的11个网页开发博客

上一篇
联系我们吧 - 12个联系我们表单和页面设计赏析和学习

Trista   09/17

2018年优秀动态网页设计大赏【附教程】

Cherry   09/13

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com