eleme（elements）

本篇文章给大家谈谈eleme，以及elements对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、在数据结构中Eleme是什么意思？怎么用？
• 2、美团和饿了么外卖怎么翻译
• 3、用户体验五要素简析eleme订单确认页面
• 4、element使用教程
• 5、饿了么基于Vue2.0的通用组件开发之路
• 6、element是什么意思

在数据结构中Eleme是什么意思？怎么用？

Eleme是一种变量的类型；在具体使用的时候，我们可以在前面根据需要声明一下就可以了，如

typedef int Eleme ; 这样以后使用Eleme定义的变量就是整型了

美团和饿了么外卖怎么翻译

这个各有特色，其实看哪个好实际上是看哪个店家多，哪个优惠多，但是他们优惠都是变的，有时候美团划算，有时候饿了么划算，有的地方饿了么划算，有的地方美团外卖划算，总体来说是差不多的

用户体验五要素简析eleme订单确认页面

体验环境

设备：iPhone7plus   

版本：ele 7.41

一、战略层分析

       笔者由将两大灵魂的拷问开始叙述，“我们要通过这个产品得到什么？”“我们的用户要通过这个产品得到什么？”一个是企业的目标、一个是用户的需求。

1.1、 企业的目标，收银台首先应保障交易订单顺利的流转不流失。与此同时，提高交易透明度和便捷度，优化用户在交易过程中的体验。以及联合增值服务、用户增长、商家营销共同 *** 用户支付，提升最终交易量。

 1.2、用户的需求，用户是谁？用户从哪里来？用户要做什么？ 我们要帮做什么？a、用户是买家；b、用户从商品模块流入，已经完成商品选购；c、买家要进行支付交易；综上，用户的需求是买家在确认支付商品后与最终付款前通过收银台进行确认交易各环节信息。使其顺利完成交易，避免因信息不对称造成在交易过程中的不良后果。

二、范围层

     由战略层需求，确认我们要的产品范围。

1.1、我们的todo范围，根据企业目标与用户需求制定我们的以下todo。 a、保证页面简洁流畅，信息表发明确无误差，支付流程不卡顿；b、引导用户完善交易必要要素（商品、用户、支付），校验校验要素的合法性，对事前防范、事后补救，顺利完成交易活动；c、提供增值与附加服务（准时达、发票、备注等信息）保证交易正常的前提下提升用户体验；d、折扣抵用配合用户增长，提高支付率。

1.2、我们对范围的划分，我们知道交易是指双方以货币及服务为媒介的价值的 交换 ，根据我们最目标以及用户需求的认识，我们对该页面进行范围层功能模块要素进行划分。

1.2.1首先是交易的必要要素，a、买家，实际受益主体，即用户信息，包含用户名、物流地址、联系 *** 等b、价值商品，需要付出价值购买的主体，即实物商品（食品+包装）、服务商品（配送）等c、货币，价值交换主体，即支付方式等。

1.2.2可有可无但不影响交易的非必要要素，a抵扣，关闭不影响商品交易，即红包服务、满减服务等；b无价值商品，无需付费，关闭不能影响商品交易，即卖家赠送、备注口味、开发票、配送时间等 c、价值商品，需额外付费，关闭不能影响商品交易，即换购、准时达。

分析：支付页面（外卖配送），作为成熟产品要素功能具备完整，模块划分明确。

三、结构层，笔者本次主要针对饿了么支付页面，用户“订单页面泳道状态图”以及“提交订单时序图”进行了梳理， 并结合战略层与范围层结论，对页面中用户状态进行解构分析。用户如何到达某个状态，并且在他们活动状态结束后如何流转至下一个状态。

订单页面泳道状态图

分析：作为整体结构明确，页面间跳转简洁明快。作为支付页面需要简洁流畅，尽可能减少页面间的切换，降低回退与跳出率。每个交易要素，都包含默认项，在用户不操作的情况下，依然不影响订单提交。在形式上，固定选项（送达时间、支付方式、餐具份数）均为弹窗，直接修改。非固定选项（联系地址、红包、备注、发票信息）均备新增、删（自动删除）、改（出红包）基本功能，新建后默认选中，减少用户操作。外卖配送与到店自取切换相对流畅。

四、框架层

        在范围层笔者对交易涉及的因素做出整理，框架层将根据范围要素进行设计布局。笔者认为，必要要素优先级高于非必要要素；用户重点关注的配送时间、抵扣红包适当前移；首屏范围内，应必要要素（用户、商品、支付）、应尽量在首屏展示可以看出，目前线上支付页面（外卖配送），从顶部向下的布局优先级基本无误，满足用户对必要要素信息的获取，前置了用户高关注度的非必要要素（配送时间与红包）

建议点：

1、短距离位置提醒，目前系统已经对远距离进行识别，帮助用户剔除配送范围外的地址。但近距离配送还是会有出错概率，建议增加短距离识别，避免在可配送范围内位置用户选择出错问题。比如同办公区，楼栋不一样。配送坐标与实际大于一定距离，应给出提示。

2、地址与时间合并，支付方式后置。在分类上地址和时间同属用户配送相关信息，建议视觉上合并在一起。支付方式，操作频率相对稳定，用户认知极深，可相对后置，在企业立场上也可以减少非支付宝外的支付方式切换。

3、增加口味切换，根据大数据对菜品与用户的标签，如用户通过其他途径反馈不能吃辣，误选了辛辣食物可以快速切换口味（前提是食物本身多口味可选）。选错口味虽然是用户的操作问题，但也是极大的伤害用户体验。

4、商品合并，基于对重要信息的优先展示，首屏可见范围内应展示包含用户、商品、支付以及配送时间信息。目前商品展示平铺，在商品量大的情况下，阻当了其他重要信息机会。如商品量过大的情况，产生较高额的包装费与配送费，用户获取这些信息会有不方便

5、快捷增加主食，基于减少页面回退、跳出，对用户在点餐过程中可能出现的常见错误，给与补救措施。目前系统已支持对未点主食的提醒，但还需回退去操作，建议增加快速添加主食功能，界面可与换购融合。

6、合并全部付费项目，在商家页面，底部会进行所选商品+包装费金额统计，但不包含配送费；支付页面，商品小计统计商品+包装费+配送费+红包统计；支付页面底部浮层统计在小计基础上+换购+准时达，同一单，在不同位置给出三个价格统计，可能会引起用户对订单价值的疑惑。可考虑对支付页面内部金额总计进行统一设计。

7、小计金额与底部统一，目前分别计算两次。（和6的问题一样）

8、新增备注匹配，如用户购买过同商品、类似同名商品，可帮助匹配历史备注。如在A商户点的鱼香茄子，备注“少点油腻，多点茄子”，在B商户购买同商品，可帮助用户填写。主要的想法就是，根据用户的口味信息，预先匹配备注，方便用户。具体逻辑交互可能更复杂，有机会可以探讨哈。

五、表现层

整体上页面比较简单，在视觉设计上比较成熟完备。在视觉层上的建议，如下：

1、页面文字整体比较多，备注比较多，建议精简文字，保持版面简洁。

2、底部提交按钮为绿色，个人感觉不是很显眼。

页面交互设计图

element使用教程

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入js和css文件即可开始使用。

元素调用

饿了么基于Vue2.0的通用组件开发之路

Element：一套通用组件库的开发之路

Element 是由饿了么UED设计、饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库。今天我们要分享的就是开发 Element 的一些心得。

官网：

github：

## 设计目的

大部分项目起源都是源于业务方的需求，Element 也是一样。随着公司业务发展，内部开始衍生出很多后台系统，UED 部门也接到越来越多的设计需求，分析整个过程，我们发现如下问题：

- 日渐增多的后台产品设计需求

- 设计资源有限，没办法支持所有业务线

- 公司内部诸多后台产品使用体验不一致

于是我们决定：

- 设计一套后台支撑框架，提升后台系统的可用性和一致性

- 套用此框架，即使没有设计师参与，也能让产品或开发设计出一套好用的后台系统

## 设计阶段

下面简单说一下设计 Element 经历的几个阶段。

**了解业务并熟悉公司内各后台产品，寻找业务上的共性问题**

设计的目的是为了业务服务。之一步我们从内部系统开始入手，了解公司内部在使用的各种后台系统，将其组件抽象剥离，寻找共性特征。

**专注业务组件设计**

总结了公司不同系统不同组件的使用情况后，我们打算从业务组件入手，因为这部份是由公司特殊需求衍生的解决方案，我们认为解决了这些棘手的问题，也能给其他后台产品带来好的设计引导。

**寻求开发支持**

到这一步，我们开始寻找公司内部的开发团队，并在这时才得知不同团队里使用着不同的前端框架，有 Vue、React、Angular 等等。

**与大前端合作**

大前端作为独立的前端团队，有能力开发底层的工具去服务不同业务，并且 Vue 也是一套年轻且发展方向很好的一个技术栈。UED 与大前端的合作一拍即合。

**方向转变，专注于基础组件**

跟大前端接触后，才发现最开始的方向并不正确，因为业务变化过快，即使有通用的业务组件，也很难跟上需求的变化，而基础组件才是所有开发团队都需要的通用组件。这时候我们开始把方向调整为基础组件的设计。

**组件交互完成，进行视觉封装，并搭建主体网站**

前期的设计工作主要是由交互设计师进行设计，等确认完所有组件的功能和交互后，开始进行视觉阶段，这中间包括制定颜色、字体等各类规范，也同时进行主体网站的设计。

输出 UI Kit 文件，统一设计规范

之一版网站设计，此处的「特殊组件」即业务组件。

**网站二次设计**

之一版网站上线后视觉效果并不好，我们内部进行了调整，再次上线后就是大家现在看到的样子。

设计过程简单来说就经历了这几个阶段，如还有问题可以继续交流，下面进入开发阶段。

## 开发目的

- 后台系统缺乏一套完整的基础组件库

- Vue 在公司内部是一个比较年轻的技术栈，希望做一些基础设施的建设

- 提升公司在技术社区的影响力

## 开发流程

进入开发阶段后，在总体架构方面我们做了一些尝试，下面按照时间顺序分享给大家：

**如何与设计师进行配合**

经过项目初期开发和设计的磨合，我们提炼了一套组件开发流程：

1. 根据交互稿和视觉稿进行开发，期间与设计师保持沟通

2. 开发完成后自测，之后提交设计师验收

3. 设计师提出修改意见，根据意见进行修改

4. 完成组件开发，为网站编写例子和文档

**如何管理多组件项目**

在开发之初，我们就在思考如何降低组件的耦合度，确保组件可以独立工作。这样的目的是可以保证组件可以依赖其他组件、让用户只加载其中几个组件甚至在安装时只安装需要的组件。更先想到的做法是一个组件单独一个仓库，而组件库项目就是把组件作为依赖引入。

但是由于人手不足，这样的机制导致开发太耗时间，每个组件都需要单独维护和打包，同时还要维护组件库项目的各依赖的版本号。我们只能另寻方案。后来参考了

[babel]() 项目的管理方式：所有子项目放在 `packages/`

目录里，一个子项目可以当作一个独立的仓库。通过 [lerna]()

来管理子项目的依赖和发布。

结合自身项目的特点以及 babel 的这套机制，我们重构了目录结构：组件可单独作为一个项目放在 `packages/`，共用函数放在

`src/` 里。最后的打包结果会将整个组件打包成一个文件、组件分别打包成独立文件，同时发布时还将发布组件库和独立组件，满足不同用户的使用需求。

**如何解决自定义主题**

开发一套组件库就离不开定制主题的需求。类名要足够友好，尽量避免存在样式层级嵌套，这样在直接覆盖样式或者单独写一套主题都会方便许多。所以我们采用 BEM 的方式管理类名，同时尽可能将属性值用变量代替，维护一份变量文件便于直接修改变量就能定制一套主题。

考虑到不同用户的使用习惯，我们没有选用 Less 或 Sass 之类的有各自风格的预处理器，而是选用了更接近未来标准的 CSS4

风格的语法，用 PostCSS 和整合了 postcss-bem 和 postcss-cssnext 等插件的

[postcss-salad]() 开发。

为了降低用户自定义主题的上手成本，我们还提供了命令行工具指导用户快速自定义一套主题。

**如何提供一份直观的文档**

文档不仅是让用户看起来直观，也要让编写者写起来直观。所以最简单的方式是用 Markdown

写文档。但是就会产生另一个问题：如何在文档里写可运行的示例？常规的做法是把文档写在 Vue

文件里，这样就可以在里面调用其他组件，但是这样就违背了写「直观」文档的初衷。

经过几番尝试，结合 Vue 的特点。我们写了一套处理 Markdown 文件的 webpack loader，可以将 Markdown 转成 Vue 文件，不仅降低了文档的维护成本，同时也将文档里运行组件示例变成可能。

**多语言官网如何配置和管理**

Element 在立项之初其实并没有考虑国际化的问题。项目开源之后，我们陆续收到了一些外国开发者的反馈，希望能够增加英文文档。不久之后，国内的一个翻译团队主动联系到了我们，为 Element 贡献了整套英文文档。

有了英文文档就需要有英文网站，这就需要对官网的现有结构进行修改和升级；同时为了面向未来，需要官网能够兼容除英语外的其他多语言。为此我们做了以下工作：

1. 路由

官网的路由是根据一个记录了导航信息的 `json` 文件自动生成的。因此需要在这个 `json` 文件中添加对应于其他语言的字段，并且根据新的数据结构修改路由生成的逻辑。

2. 页面

官网中除了文档外，还有一些介绍性质的页面。这些页面中文字比较多，如果人工管理每种语言的页面，若需要修改则必须去每个页面相应的位置进行编辑，有些繁琐。我们的做法是：每个页面对应一个模板，模板中的文字全部抽取到一个语言配置文件中，并且写了一个脚本生成最终的页面。这样在需要修改时，只需在语言配置文件中编辑对应的字段即可。

3. 网站组件

对于 `header` 、`footer` 等通用的页面组件，我们采取了和上面类似的策略。但由于组件内的文字较少，于是没有再使用模板，而是通过路由判断应该显示何种语言。

中英文网站的显示效果

至此，我们也逐渐完善了技术栈。用 ES2015 和 CSS4 作开发语言、Lerna 负责管理组件、用 Karma 搭配 Mocha 和

Chai 等工具在 Travis CI 里做持续集成测试，最后用 Markdown 结合 Vue 写文档。我们甚至还在 CI

里实现了自动部署网站和推送主题仓库代码等功能，提升了不少开发效率。

element是什么意思

element英 [ˈelɪmənt] 美 [ˈɛləmənt]

n.要素; [化] 元素; 原理; [电] 电阻丝;

[ *** ]节点; 单元体; 元素 元素;

[例句]We perform additional *** ysis on this set to determine from it the

resource element within the system that should host, or receive, each operation

invocation.

我们对此 *** 执行额外的分析，来从中确定应该寄存，或接收，每个操作调用的系统中的资源要素。

[其他]复数：elements 形近词： elemene clement elememt

关于eleme和elements的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。

标签： elements eleme