APP设计与网站着陆页设计

news/2024/5/9 21:45:13/文章来源:https://blog.csdn.net/wrq9653/article/details/80040047


APP设计


可用性的四要素

o   功能性:这个产品能够正常工作吗?

o   可学习性:这个产品在不经过额外学习的情况下能够顺利使用吗?

o   灵活性:除了完成主要的任务之外,这个产品能做更多的事情吗?

o   工业设计:这个产品设计上是否足够优秀、漂亮?

用户体验的四要素

o   可用性:完成任务是否很容易?

o   适应性:用户是否很快开始顺利使用这个产品?

o   合意性:体验是否有趣并且引人入胜?

o   价值:产品对于用户而言是否有价值?



系列位置效应

1. 把重要的信息放在前面或者后面,不要放在中间,以达到最佳效果。

2. 列举的项目是视觉项目,记得把最重要的项目方案放在最前面。举个例子:第一屏放什么内容是各位最纠结的事情吧。

3. 列举的项目是听觉项目,记得把最重要的项目方案放在最后面,举个例子:《我是歌手》每期中,谁抽到最后一个出场都很兴奋。


4. 碰到用户要做出决定的情况下,如果必须在最后一项出现后选择,请把该项目放在最后,举个例子:规则条款阅读选项(如上图标记处);相反,请放在前面,以增加获选概率。



一、网格布局

网格,它的特点是会有一些单元格组,这些单元格按横竖空白列隔开。在一些手机 APP 和网站中,这样的设计很常见。

在左侧的示例中,有2列,留白间隙在水平和垂直方向上都有切割。间隙是可以调整,可以把它们按照你想的方式进行大小的调整。

通常,网格被用来将屏幕空间划分为大小相同的单元格,使得导航更容易理解。网格的美妙之处在于可以被定制并且能让你的设计变得更加有秩序。

网格的其他好处:

o   有效利用空间和结构。

o   网格可以让视觉上更加和谐。



二、列表布局

列表布局不同于网格布局,这种导航模式简单地由一个元素与另一个元素按字母顺序、数字顺序甚至是随机的顺序排列组成。在上面的示例中,你可以看到一个标准的产品列表。

在几乎所有的 APP 中,都有一些列表可以在某个地方被找到。在使用垂直滚动菜单时,它们非常适合给用户操作和阅读。列表可以有很多不同的变体,比如上面的产品列表甚至是下拉菜单。列表占用的空间比网格少,所以如果内容文本繁多,用列表布局就会是一个很不错的选择。

列表的其他好处:

o   适合高效的浏览。

o   在屏幕空间较少时表现更好。



网站的着陆页

1. 为页面设置一个明确的目标

o   点击一个特定的链接

o   查看视频

o   玩一个小游戏

o   填写表单

o   购买产品

o   分享内容到社交媒体

o   阅读,或者和内容进行互动

 

2. 为访客而设计

着陆页的设计,一定是要考虑到网站的访客,你的用户。这听起来挺理所当然,但是实际上很少有网站能够真正做到。整个页面中,所运用到的图片和元素应该和用户相关,文本和文案也应该以贴合用户甚至让用户喜爱和欣赏的方式来呈现。

你可以深入分析你的关键性的受众。

o   他们是男人还是女人?

o   他们年轻还是年长?

o   他们是否分布在特定的区域?

 

3. 使用风格强烈视觉有力的图片

风格强烈,视觉上有力,又或者是足够有趣的图片,往往会给用户留下深刻的第一印象,并且能够让用户参与进来。

 

4. 设计层次清晰的文本

绝大多数的网站中都会包含不同层级的文本内容,而每个层级的文本内容的重要性、功能都会有差异,有的需要抓人眼球,有的则需要用户专注地仔细阅读。所以,你的设计需要围绕着文本的功能来设计。

o   标题:使用精炼而吸引人的文本让用户注意到。

o   正文:主要的信息,简洁,直接,清晰。

o   行为召唤文本:通常以按钮和链接的形式存在,告诉用户要做什么,下一步执行什么,如何抵达目标等等。提供明确的、可操作的指引。

页脚:提供相关的链接和信息,诸如品牌、联系方式和社交媒体链接等,建立信任,提供周边信息。


 

5. 导航和关键词的结合

着陆页上的导航元素有助于告诉用户网站的内容,将导航元素视为整个网站的关键词系统的一个组成部分是非常有意义的。

 

6. 清晰的行为召唤

每个用户都应该知道他们所打开的网站是做什么的,清晰的行为召唤指引是至关重要的。不要以为用户是你肚子中的蛔虫,你往往需要通过指引来引导他们做你希望他们做的事情。

比较常见的行为召唤方式是按钮,填写表单,引导说明(比如滚动以查看更多),甚至动画。

 

7. 尽可能定制内容

着陆页本身就是为了特定功能而存在的,而且这个目标和功能通常是比较单一的,而这样的页面自然也需要足够的自定义设计来尽量达成目标。



8. 清晰而高关联性的品牌设计

着陆页最常见的问题就是容易让人感到厌倦,或者和主站的信息、设计上有所割裂。

在品牌设计上,着陆页和首页以及品牌本身应该有清晰的关联,确保用户不会有跳出感,让他们能够自然的参与到内容当中来。


9. 符合用户预期

当用户在其他的网站上点击链接跳转到这个着陆页上来的时候,他们会对这个页面或者网站有所期待,换句话来说,着陆页的设计应该具备特定的功能,迎合特定的需求,并且要贴合跳转的来源用户的预期。

Bills.com 这个网站的着陆页采用了相对简单的设计,它可以帮助用户管理财务。从网站的名称到功能,用户能够形成一个相对明晰的概念和预期,而完成整个流程之前,用户不会看到其他的无关内容。

这样的设计和网站的跳转来源(比如社交网络)有着紧密的关联,用户知道接下来会发生什么。



10. 构建层次结构和流程

设计良好的着陆页有着良好的可用性,这也意味着它有着清晰的层次结构。用户应该先看什么再看什么?他们将会在页面上执行什么任务,实现什么目标?合理的层次结构和贴合用户模式的流程很大程度上能够让用户和页面进行正确的互动,帮助用户达成目标。

在上面的 LSProductions 网站中,设计师让网站在视觉上呈现出清晰的行动流程,超大的视频背景,分别置于顶端两边的 LOGO 和菜单,以及向下滚动的 CTA 引导说明「Scroll for more」。用户可以在几秒钟内快速获取这些信息,并且开始操作。







本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_862958.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

win2012 服务器IIS 8.0 搭建FTP,VS2015发布网站(一)FTP设置

沉寂了段时间,想明白了一些事情,现在准备学学asp.net5当前微软的主流mvc5开发网站 现在想用nopcommerce 搭建商城,作为业余时间的爱好玩玩 首先,打开服务器管理器,点击添加角色和功能 web服务器IIS里面这些选项打勾 然…

win2012 服务器IIS 8.0 搭建FTP,VS2015发布网站(二)Visual Studio发布网站

书接上文,右键项目,点击发布 发布web里面,点击 自定义 输入配置文件名称 发布方法-选择FTP 服务器-填写ftp://ftp服务器地址:端口,例子:ftp://baidu.com:21端口号一定要加 站点路径-如果ftp的根路径是/,网站绝对路径…

python爬取前程无忧招聘网站数据搭建Hadoop、Flume、Kafka、Spark用Hive做数据分析Sqoop存储到Mysql并实现可视化

文章目录 一、项目总体要求二、环境搭建1、安装包准备2、安装jdk(1)查询是否安装java(2)卸载jdk(3)安装jdk(4)配置jdk环境变量 3、配置ssh免密登录(1)进入到我…

爬取我爱我家网站二手房信息

items文件定义爬取数据: apartment scrapy.Field() total_price scrapy.Field() agent scrapy.Field() image_urls scrapy.Field() images scrapy.Field()spider文件: # -*- coding: utf-8 -*- import scrapy from pachong2.items import Pachong…

使用httpwebrequest发送数据到网站

怎样通过HttpWebRequest 发送 POST 请求到一个网页服务器&#xff1f;例如编写个程序实现自动用户登录&#xff0c;自动提交表单数据到网站等。 假如某个页面有个如下的表单&#xff08;Form&#xff09;&#xff1a; <form name"form1" action" http://www.…

大型电子商务网站架构

大型电子商务网站架构 (转自&#xff1a;http://www.cnblogs.com/skydau/archive/2009/08/30/1556701.html) 7.同一个网站的多语言该如何处理是好,使用配置文件然后cookie或url来判别?客户是自己公司&#xff0c;使用标准方法即可 8.电子商务网站最多的就是 商品的打折方式和…

小型电子商务网站设计原则

最近谈得最多的话题莫过于大规模&#xff0c;大数据量&#xff0c;高性能&#xff0c;高并发等架构话题&#xff0c;其实一个电子商务网站开始时一定是小规模&#xff0c;小数据量&#xff0c;用不着把架构弄得过于复杂。高度设计、过度扩展(高德纳大爷也说过&#xff0c;"…

正确地定制您的网站 ndash; 文件替代机制,zencart

很多用户对zen cart做了自己的修改&#xff0c;非常好&#xff01;但同时&#xff0c;一些用户修改了很多重要的文件&#xff0c;例如&#xff1a; /includes/filenames.php /includes/languages/schinese.php /includes/languages/schinese/*.php 等等… 友情提示&#xff…

网站集成支付宝

&#xff08;本文转载于http://stephen830.javaeye.com/blog/254827 ) 国内电子商务系统实现的基本流程如下&#xff1a; 客户在系统内下订单 -> 系统根据订单生成支付宝接口url -> 客户通过url使用支付宝&#xff08;网上银行&#xff09;付款 -> 支付宝将客户的付款…

淘宝技术发展(个人网站)之二

个人网站 2003年4月7日&#xff0c;马云&#xff0c;在杭州&#xff0c;成立了一个神秘的组织。他叫来十位员工&#xff0c;要他们签了一份协议&#xff0c;这份协议要求他们立刻离开阿里巴巴&#xff0c;去做一个神秘的项目。这个项目要求绝对保密&#xff0c;老马戏称“连说梦…

如何编写外贸电子商务网站产品的描述信息

把自己的商品信息准确地传递给你的客户&#xff0c;是运行电子商务的重要环节&#xff0c;也是促成客户选购产品的关键因素。对于电子商务网站来说商品的描述是必不可少&#xff0c;是对图片信息的重要的补充。图片传递给客户的只是商品的形状和颜色的信息&#xff0c;对于性能…

利用CDN技术加速国外客户访问外贸电子商务网站的速度

很多外贸企业都遇到过这样的问题&#xff1a;网站做得非常好&#xff0c;可还是经常得到国外客户的反馈说是访问网站的速度慢&#xff0c;这不仅会在很大程度上影响企业的外贸交易&#xff0c;还会很大的影响到企业的形象。保证国外客户高速地访问您的网站&#xff0c;是您在外…

网站数据分析工具

对于外贸电子商务平台而言&#xff0c;除了网站销售的产品内容及销售额外,那些很有可能直接转化为订单的数据&#xff0c;包括流量、订阅数、排名和主机等&#xff0c;也是非常重要的&#xff0c;另外还有一些其他平台的相关数据及盈利情况等等&#xff0c;也都需要外贸电子商务…

使用 Startssl 提供的免费证书+Nginx 搭建 https 的网站

使用 Startssl 提供的免费证书Nginx 搭建 https 的网站 Posted on October 1, 2010 by gkp Startssl 是一家提供免费 SSL 证书的公司&#xff0c;我们可以用其搭建 https 网站&#xff0c;貌似可以被除去Opera 外的所有主流浏览器所信任&#xff0c;过程简单记录如下&#x…

提高网站转化率,将观众变为永久用户的九个关键点

本文是博文《9 Keys to Increase Website Conversion Rate and Turn Visitors into Customers》的译文&#xff0c;编译内容如下&#xff1a; 从根本上讲&#xff0c;本文是一篇关于吸引在线用户注意力的文章&#xff0c;因为如果没有注意力&#xff0c;就没有人看你的链接、图…

PHP网站备份程序代码分享

php中通过代码备份网站的实现代码&#xff0c;很方面大家在线备份网站&#xff0c;需要的朋友可以参考下。 详细出处参考&#xff1a;http://www.jb51.net/article/27337.htm 效果图: PHP代码 <html> <head> <meta http-equiv"Content-Type&q…

使用ThinkPHP框架快速开发网站(多图)

使用ThinkPHP框架快速搭建网站 这一周一直忙于做实验室的网站&#xff0c;基本功能算是完成了。比较有收获的是大概了解了ThinkPHP框架。写一些东西留作纪念吧。如果对于同样是Web方面新手的你有一丝丝帮助&#xff0c;那就更好了挖。 以前用PHP做过一个很蹩脚的网站&#xff0…

微信扫描二维码登录网站技术原理

微信扫描二维码登录网站 网站应用微信登录开发指南 微信扫描二维码登录网站是微信开放平台下网站应用的一种接口实现的功能。微信开放平台的网址是 https://open.weixin.qq.com 准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信…

Nginx网站服务的搭建和优化、重写跳转

1.Nginx简介 1.概况 Nginx&#xff1a; Nginx是一个高性能的HTTP和反向代理服务器是一款轻量级的高性能的web服务器/反向代理服务器/电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器单台物理服务器可支持30 000&#xff5e;50 000个并发请求&#xff08;实际上20000-3…

山寨网站正确的做法

下了网站的源码&#xff0c;结果有问题&#xff0c;短时间调试无果&#xff0c;试了各种网站下载器&#xff0c;下载的网站不能看。最后&#xff0c;决定手动来。 思路&#xff1a;一个网页一个网页的扒 工具&#xff1a;火狐浏览器、迅雷、一个新建的文本、PHPStorm9、PHPStud…