整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。
链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。
文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。
谷歌的文本链接是蓝色，没有下划线
百度的文本链接也是蓝色，关键词是红色，有下划线
而京东的文本链接有灰色，有白色，有黑色
按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。
按钮样式链接
图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。
如桌面弹出这种游戏小窗口的图片式链接
由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位
链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。
提示用美拍APP打开
按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。
链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。
与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。
HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。
外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。
外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。
如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。
链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：
点击前
悬停时，下面浮现半透明线条
点击时，有波纹晕开的动态效果
点击后，下面线条粗
有时候是3种状态，比如百度网和知乎应用：
默认状态
点击时链接变红
点击后链接变成紫色
IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。
默认状态
点击状态
用力点击会弹出预览小窗口
有些时候只有2种状态，如下图谷歌网：
默认和点击后状态一样
鼠标悬停时出现下划线
默认状态
点击时
而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。
总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。
作者：潘瑶琼（简书作者）
本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。
信小程序自 2017 年1月9日正式上线以来，就引起广泛关注。微信团队也不停地对小程序进行更新。微信小程序的优势十分明显，小程序触及了 PC网页，公众号，H5，APP 无法触及的地方，其无需安装，用完即走的理念能够满足用户需求且节省手机内存。站在小程序的拥有者的立场，其开发成本大大减小，同时可借助微信强大的流量入口，因而也降低了推广的难度。总的来说，微信小程序是一种全新的方式能够更好地在用户和服务中建立连接，并且可以在微信中便捷地获取和传播，具有不错的使用体验。
小程序采用了类似 React Native 和 Weex一样的解析技术，开发者可以编写一套程序在多种客户端运行，同时，相比于公众号、微商城具有更好的原生体验。全面开放申请以后，作为企业、政府、媒体、其他组织或者个人的开发者，都可以申请并注册小程序。小程序和微信的订阅号、服务号以及企业号是并行的体系，具有独立的注册以及发布流程。
1.1小程序接入流程
小程序的接入主要有4个步骤
(1)小程序注册：在微信公众平台官网首页(mp.weixin.qq.com)注册并提交注册信息、完善主体信息和管理员信息。
(2)完善小程序信息：完善小程序的基本信息如名称、头像及服务范围等。开发前需绑定开发者并获取APPID，以保证程序可以通过手机进行扫码测试。
(3)开发小程序：下载安装微信开发者工具，微信官方提供了一套完整的开发框架，开发者可以根据微信开发文档进行小程序的开发与调试。
(4)代码审核及发布：小程序开发完成后，不能够直接发布，需提交代码与开发配置信息提交审核，完成后尚可发布。
1.2微信Web开发者工具
官方公布的微信开发工具名为微信 Web 开发者工具，小程序前端开发框架是微信官方提供的框架。微信 Web 开发工具是一种基于Native System 系统层的框架，由于并不是运行在浏览器中，所以JavaScript 在 Web 中的一些诸如 Document，Window 等方法均不可使用，以往HTML5加载的时候在网络环境会有所限制，需要逐步加载HTML，CSS，JS，然后返回数据，最后染页面展现在浏览器中。用户总是需要等待很久，这样使得用户体验感大大降低。相比之下，小程序的两个线程：AppserviceThread 和 ViewThread 会同时进行、并行加载，甚至Appservice Thread 会更早执行当视图线程加载完，通知 Appservice，Appservice 会把准备好的数据用 setData 的方法返回给视图线程。小程序的这种优化策略，可以减少用户的等待时间，加快小程序的响应速度。
微信 Web 开发者工具区别于 H5的开发工具+浏览器 Device Mode 预览的模式，而是基于自己的开发者工具，可以实现同步本地文件+开发调试+编译预览+ 上传+发布等一整套流程。同时小程序自己开发了一套WXML标签语言和 WXSS样式语言，并非直接使用标准的 HTML5+CSS3。同时提供了很多原生 APP 的组件，之前在HTML5中需要模拟才能实现的功能，在小程序中可以直接调用组件来实现。
2.1框架
2.1.1小程序的文件结构
使用微信Web开发工具新建一个项目，框架会自动生成描述整体程序的APP和多个描述页面的 page文件。完整的小程序主要组成有:
一个入口文件：app.js
一个全局样式：app.wxss
一个全局配置：app.json
在页面 pages 下将页面安装文件夹划分，每个页面存在4个文件，分别是：
视图层：wxml文件、wxss 文件;
逻辑层：js 文件json 文件(页面配置，不是必须)
(1)app.js 是控制小程序逻辑的脚本文件，appjson 是小程序的配置文件，负责对小程序的全局配置。app.wxss 是全局样式表，作用范围是项目的每一个页面
(2)wxml是一种类似xm格式的语言，具有数据绑定、条件染、列表染自定义模板、事件回调和外部引用等功能。pagewxml主要通过使用基础组件构建页面结构。
wxss和css 格式的语言有相同之处，用于描述 wxml的组件样式，page.wxss的优先级比 app;json的Window 高。同时，微信为小程序新增了尺寸单位 rpx，rpx 可以根据屏幕宽度进行自适应，rpx 实际上就是系统级的 rem(把页面按比例分 750份Irpx=innerWidth/750)
pagejson 可以对独立定义的页面进行一些属性的设置，以满足实际需要config.json 可以设置一些个性化配置，当重新安装工具或者换一台电脑时，只要导入相同的代码包，开发工具就会自动恢复到开发这个项目时的个性化设置JS文件主要用于用户交互、响应用户点击等。在小程序中，通过JS 脚本来响应用户操作。
2.1.2了解小程序框架
微信小程序开发是基于框架的，从软件设计角度来说，框架是一个可复用的软件架构解决方案，规定了应用的体系结构，阐明软件体系结构中各层次间及其层次内部名组件间的毅力关系，责任分配和控制流程，表现为一组接口、抽象类以及实例间协作的方法，是指对某一指定应用领域中的应用系统的部分设计与实现子系统的整体结构。
小程序开发框架的核心是一个响应的数据绑定系统。分为视图层(View)和逻辑层(APP Service)，小程序开发工具提供了视图层描述语言 WXML和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间设置了数据传输和事件系统，使得开发者能够很简单地将重心放在数据与逻辑上。处理事务逻辑的地方被称为逻辑层。在微信小程序中，所有 js 脚本文件的集合构成逻辑层。逻辑层与视图层相互配合，完成数据处理及接收事件反馈。框架的视图层由 WXML与WXSS编写，通过组件进行展现。对于小程序本身，.wxml 文件与.wxss 文件的集合构成了视图层，逻辑层处理数据之后，会发送给视图层用于与用户的交互，同时接收用户对视图层的反馈。视图层以给定的样式展现数据并反馈事件给逻辑层，数据展现是通过组件来进行的。视图的基本构成是组件。
2.2相关组件
微信提供了一系列基本组件，可以通过使用这些基本组件组合形成来进行小程序的开发。这里说明几个比较有特点的组件。
2.2 相关组件
微信提供了一系列基本组件，可以通过使用这些基本组件组合形成来进行小程序的开发。这里说明几个比较有特点的组件
(1)类似，是布局中最基本的一个组件，任何一种复杂的布局都可以通过嵌套组件来实现，是一个块级容器组件，默认 display: block，它是盒模型，在布局过程中一般推荐display：flex的写法
(2)是多行输入框，与HTML 中不同的是，它的值需要赋值给 value 属性，而不是被标签包裹，是一个自闭合标签，css动画对组件无效。
(3)是页面链接，和 HTML 中超链接标签一样，主要进行页面跳转控制。链接的内容可以是一个字、词或者一幅图片，通过点击内容实现页面的跳转
(4)主要用于绘制图形，其本身是一块无色透明区域，并没有绘制的能力，仅仅是图形容器，需要调节相关的应用程序编程接口(Application ProgrammingInterface，API)来完成实际的绘图任务。
2.3API及其配置
2.3.1 域名配置
根据小程序提供的组件，开发者可以根据需要设计 UI 界面，然而小程序的一些功能就要依赖框架提供的 API来实现。在使用 API时，首先要对小程序进行服务器域名的配置，每个小程序都需要设定通信的域名，小程序可以跟指定的域名进行网络通信。目前支持的有 HTTPS(request)、上传文件(uploadFile )、下载文件( downloadFile)和WebSocket 通信。
(1)wxrequest( Object ) ：实现小程序与开发者的服务器实现数据交互request方法的作用是发起HTTPS请求，在小程序中，只能使用HTTPS请求而不能使用HTTP 请求，一个微信小程序同时只能有5个网络请求连接；
(2)WebSocket：request 方法是通过客户端主动向服务器发起请求，而服务器端响应返回数据来实现通信的目的。这种方法存在缺点，那就是服务器不能主动向客户端发送消息。因此要实现服务器和客户端之间的即时通信只能采用轮询的方法，而且request 的 Header 是十分长的，为了传输一个很小的数据会占用很多的宽带。针对这种情况，开发者可以通过小程序提供的 WebSocket 相关 API 创建 WebSocket，WebSocket 只需要服务器和浏览器通过 HTTP 协议进行一个握手的动作后单独建立一条传输控制协议(TransmissionControl Protocol，TCP)的通信通道就可以进行数据的传送，实现长连接以达到通信的目的。
出处 无线互联科技
原标题 微信小程序开发研究
作者 武思怡 解佺 张雨 侯秉昀
问题修复:
细微变化：
其它的改进和变化：
购买最新版Aspose.Email咨询在线客服>，即可拥有最新正版授权!
本站文章除注明转载外，均为本站原创或翻译
*请认真填写需求信息，我们会在24小时内与您取得联系。
