Amaze UI 3.0 建议反馈帖

千呼万唤,Amaze UI 3.0终于要启动内测啦!!

全新界面,全新体验,等你来尝鲜。

具体体验细节及详情请进群了解:内测QQ群:605282743(限量200人)

请各位参与内测的小伙伴把遇到的问题或者好的建议按照以下格式来反馈,感谢!

 

1、设备:(手机、平板等移动设备时填写此项)

2、操作系统及版本:

3、浏览器及版本:

4、截图/详细问题描述:(贴上相关代码或演示地址)

5、建议:

参考链接:http://beta.amazeui.org/docPreview/advanced/feedback.html

已邀请:

csalhl - 90

赞同来自: AmazeUI

位置不对

子陌

赞同来自: AmazeUI

鼠标经过按钮与下拉弹框缝隙 下拉框消失 用户体验差

deak100

赞同来自: AmazeUI

Switch 元素太小了

hysnail

赞同来自: AmazeUI

好多 href="#" 每次点击链接,都回到最上面去了!

xfworld - 倔强的和时间对抗......

赞同来自: AmazeUI


QQ图片20170213163222.png

求高度计算~~

hysnail

赞同来自: AmazeUI

开关 switch 希望可以增加尺寸的调节!

jacksonwj

赞同来自: AmazeUI

操作系统:Win 7 Pro x64
浏览器:Chrome 56

以下内容全部是基于官方网站(beta.amazeui.org)看到的,之前使用了2.7.0 和 2.7.2,都自己改动了一些 css 和 js。

1、基准字体
建议:字体大小:14px 看起来比较协调(PC + 手机),个人喜好问题。
系统字体:-apple-system,"Droid Sans","Droid Sans Fallback","Microsoft YaHei",FreeSans,Helvetica,Arial;

2、列表(组合 Badge)
建议:将 Badge 默认跟在文字后面,在 span 的 class 里面添加了 am-fr 的,才将 Badge 右对齐,如下图:

21.png

3、模态窗(Popup)
建议:将窗口的宽度按照浏览器的宽度进行适应,当前默认宽度是 630px。
现在的显示器普遍都是宽屏,建议:按照默认的响应式断点进行适配:
1025px+ :默认宽度 960px
641px - 1024px :默认宽度 630px
0 - 640px :默认宽度 全屏
现在我的弹出框已经全部使用 Layer 了。

4、导航条
建议:鼠标滑过 a 标签时,a:hover 的背景颜色采用透明度(opacity)来实现。
这样的话,只需要修改 am-topbar-inverse 的颜色就可以实现滑动提示效果了,并且很统一。否则还要手动调节颜色,不利于风格的统一。

5、网格 + 导航条
一般网站顶部都是导航条。
如果在导航条中使用 am-topbar-brand 的话,它的 padding-left 是 20px。
而内容区域采用 am-g 布局的话,单元格的 padding-left 是 0.9375rem。
这两个值不一致,会引起左边缘无法对齐。
同样的原因,右边缘也有一点差距,看起来有点儿不协调。

6、分页
建议:当前尺寸做为默认大小,再增加一个小一点的尺寸的样式。

7、下拉选框
在使用分组多选的时候,建议:单击 optgroup 的时候,其下面的 option 可以全部被反选(这需要配合 amazeui.js 来实现)。
我自己实现的是反选,也可以实现为:单击全选,再单击取消。

8、单/多选框
非 inline 模式,鼠标建议也设置为 pointer。
inline模式,还是稍微有点儿错位,如下图,鼠标在“运维”的“维”字中间位置,但是后面的 checkbox 被激活了。

22.png

9、表单验证
我的表单验证是通过 jQuery.Validation + Popover 实现的,如下图所示:

25.png

10、日期选择器
选中日期的背景和鼠标滑过的背景,一个圆,一个方?如下图这样,不太协调吧?!建议:背景形状改为一致。

23.png

11、上传
我的上传采用的是 WebUploader + alert + progressbar 实现的,效果如下(需要适当的调整 css):

24.png

12、开关
都是圆形的?建议:增加方形(或圆角矩形)

13、建议:增加扩展组件,可结合 Marked + Highlight.js 实现支持 Markdown。

14、建议:所有涉及边框形状(包括但不限于:button、panel、……)都添加直角矩形、圆角矩形、胶囊形三种样式。2.x 时代默认全部是直角矩形,现在全部改为了圆角矩形,但是,希望不要丢弃了直角矩形。我觉得横平竖直看起来有它自有的美。

15、建议:妹子官网的模块定制功能,增加一个选项:取消全部的自适应(不要什么 Mobile First 的概念)。

写在最后

写产品的时候一直在想,现在的框架都号称 Mobile First。其实我看到很多网站,PC 和 Mobile 还是分开布局的,毕竟要想处处匹配,没那么容易。大部分网站在移动端访问的时候,都自动跳转到 m.xxxx.com 的域名。我想这里除了流量大小,还有就是布局的困难度吧?所以,基于这样的市场需求,Mobile First 这样的概念,在现在这个大环境下,每个框架都推崇之至,是否合适呢?当然,可能是普通开发人员和框架开发人员的立场不一样。

很感谢 AmazeUI 推出这样的框架,之前一直使用 Bootstrap,偶然发现了 AmazeUI,虽然思想源于 BS,但是对其进行了升华,很好!

希望 AmazeUI 越来越好!

wos

赞同来自:

反馈一:既然不支持IE8,就永别吧。

ie8.png

 

反馈二:构建项目,建议用--save做好依赖,要不项目转移后,依赖无法安装


s0.png

建议修改为:

save.png

 

反馈三:get错误


e2.png

 

页面地址:http://beta.amazeui.org/docPreview/components/typography.html

 

反馈四:alert

感觉3.0的alert有点大,和其他组件的精致风格有点格格不入,建议精致一下或者增加 md lg等样式


a.png

 

建议 padding:0.5em 1em 后样式


a1.png

 

反馈五:页面错误

http://beta.amazeui.org/docPreview/javascript.html

 

反馈六:关于图标 i标签,建议设定宽度。 Font Awesome中的图标也有大小的问题,让对齐成为比较麻烦的事情,建议amazeui 把 am-icon标签处理,如下图:


00.png

 

反馈七:mark 中99+的标记适应能力的改进

3.0版

00.png

修改后:

a.png

a1.png

 

反馈八:面板:http://beta.amazeui.org/docPreview/components/panel.html


00.png


a.png

 

deak100

赞同来自:

建议默认字体大小能够时14px而不是16px  16px在PC显得不够精致

hysnail

赞同来自:

基础元素/按钮/拓展样式/  幽灵按钮,背景色应该是透明的!

hysnail

赞同来自:

下拉组件/触发方式

谷歌浏览器,两者有间隙,hover时,选不中下拉元素!

xfworld - 倔强的和时间对抗......

赞同来自:


QQ截图20170213162343.png

颜色高亮不明显,那个橙色太黄了吧,,感觉是黄色来的...

csalhl - 90

赞同来自:

这个是不是没对齐?

hysnail

赞同来自:

视图层/警告框alert/ 基础用法,建议使用红色或者橙色,起码比现在的蓝色体验好很多!

hysnail

赞同来自:

所有的,查看演示和在线运行,希望可以新窗口打开!

zhoufengyu

赞同来自:


QQ图片20170213165334.png

http://bin.amazeui.org/wexupefewu/edit?html,output

trigger: 'click focus'  是 "click"的时候点击一下按钮 弹出层会闪一下,第二次正常

 

讨厌的是,3.0了  鼠标悬停出现弹出层,还是鼠标一离开就隐藏,这个很不好啊

hysnail

赞同来自:

不支持 a链接标签

zhoufengyu

赞同来自:

模拟窗口Modal,黑色背景,没有动画,开关都是直接打开和关闭,比较闪眼,应该给黑色背景也渐隐,渐显的动画效果.

hysnail

赞同来自:

分页,增加自定义跳页!

jacksonwj

赞同来自:

建议:增加一个类似于下图这样的分割线(以下是我现在的实现方式,希望妹子的朋友能实现得更优雅点 :P)

<h1 id="h1">
<span>
<span>文字内容</span>
</span>
</h1>

21.png

jacksonwj

赞同来自:

我用 Macbook 看了一下,估计妹子的攻城狮们用的是 Mac 系列的电脑来开发或配色吧?

既然妹子那么考虑“国情”问题,还是建议在显示器的选择上,不要选择 Mac 那样好的色域的显示器,成品出来之后,多换几个显示器看看效果。

俺们国家的大部分用户的显示器仅仅限于看得清楚,谁管它色彩还原度的问题呢?有些色彩变化的效果,在还原度高的显示器上面,看上去很爽;但是在普通显示器上面,看上去就不是那么回事了。

我就碰到过用户的显示器,根本无法显示 #efefef 和 #ffffff 的区别,证明这样的显示器,灰阶根本不够。

moxiuxun - 90IT男

赞同来自:

http://beta.amazeui.org/ 这个新版的文档 能不能加个回顶部啊 这样好累的。还有左侧固定下

jacksonwj

赞同来自:

突然想起了,我第一次改动 amazeui.js 的原因。

弹出框(Popover)

建议:在调用的参数(options)里面,增加一个属性:zIndex。

原因:有些时候,我们在系统里面做弹出模态窗口(尤其是需要弹出多个模态窗口)的时候,想给用户用 Popover 在模态窗口中提示某些信息,但是 Popover 的 z-index 是死的,而且是直接添加在 body 里面的。如果在 css 里面改了 Popover 的 z-index,那全局都改了,这会导致,如果有两个模态窗口,第一个模态窗口上面的 Popover 会穿透显示在新的模态窗口上,不是很友好。如果能够动态设置 Popover 的 z-index,那么,每一个模态窗口的 Popover 都可以被新的模态窗口覆盖,这样的效果要好些。不然会出现穿透的效果。

lcuncle

赞同来自:

  1. img 标签,建议全局添加 max-width,否则在没有标签属性的情况下,大图会撑开网页
  2. 目前 am-list 列表中,a 标签默认 display: block; 属性,导致列表项中的链接均独占一行显示,建议 am-list 作为默认列表样式,链接列表新增列表样式,如 am-list-link

繁华的春

赞同来自:

Chosen插件多选之后,默认显示3到5个,其余的在后面显示“共23项”,这样,不然选几十个,还一直在框里显示,那得拉多大框。还有希望支持多选框,可以全选和取消全选

窝瓜 - 窝瓜大吼道:“我准备好了!”,“干吧!算我一份;没人比我厉害,我就是你要的人!来啊!还等什么?要的就是这个。”

赞同来自:

小建议:辅助类里增加.am-max-height {
                height: 100%;
            }
            
            .am-max-width {
                width: 100%;
              }在响应式和移动端开发时经常需要

窝瓜 - 窝瓜大吼道:“我准备好了!”,“干吧!算我一份;没人比我厉害,我就是你要的人!来啊!还等什么?要的就是这个。”

赞同来自:

还有在2.7中发现的一个问题:在日期选择组件中.am-datepicker-dropdown的position是absolute导致在模拟窗口中出现的位置出现误差

窝瓜 - 窝瓜大吼道:“我准备好了!”,“干吧!算我一份;没人比我厉害,我就是你要的人!来啊!还等什么?要的就是这个。”

赞同来自:

另外还有侧边栏 移动端中在侧边栏中添加input 点击的时候触发手机内置的输入法会将侧边栏关闭掉

ztw1122

赞同来自:

tree 组件  无法显示子菜单,搜索整个js,没有发现products字样....

ztw1122

赞同来自:

本网站的确认订阅的邮件,所有链接点击找不到,检查后发现链接地址如下,,,,所有的..


2017-03-08_102919.png

 

NullLove

赞同来自:

1.提供的demo中的admin-index.html,在webstorm中格式化代码后发现 287行多出了一个 </div> 标签。

2.demo里admin-前缀的 html 文件里,存在footer标签,但是在页面中并没有发现footer内的内容,审查元素后发现 footer标签的内容被顶出了页面视口。

 

 

NullLove

赞同来自:

表单本地验证通过过后不可以异步提交吗?

 木兮

赞同来自:

菜单组件都没有效果

weiguanglai

赞同来自:

3.0可否增加内外边距根据屏幕大小来调整内外边距,比如

<div class="am-padding-xs-left-sm am-padding-lg-left-lg"></div>

小屏幕下左边距10px, ,大屏幕下24px,因为在做自适应的时候在大屏幕下的边距并不适合小屏幕上使用

chadwick

赞同来自:

弱弱问下,还兼容以前的方角版本吗?到时候是否像2.X版本一样,提供圆角和方角2个CSS?用惯了,感觉方角大气。

NullLove

赞同来自:

validate插件,如果给input设置了autofocus属性,当失去焦点的时候,即使没有点击submit按钮也会触发验证,不知是否正常?

lishaoen

赞同来自:

日期选择不能选择到时分秒,应该增加能精确到时分秒很多地方要用到

 


QQ截图20170321111419.jpg

 

后来

赞同来自:

3.X啥时候发布呢?

爱搞事的程序猿 - 爱搞事的程序猿

赞同来自:

不知道为啥 轮播图无法定义播放速度 和切换时间 设置了是无效的 

改成什么样都无效

<div class="am-slider" data-am-slider="{autoplay: true,autoplaySpeed:'3000',speed:'10ms'}">
<ul class="am-slider-wrapper">
<li class="am-slider-item">
<img src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="">
</li>
<li class="am-slider-item">
<img src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt="">
</li>
<li class="am-slider-item">
<img src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt="">
</li>
<li class="am-slider-item">
<img src="http://s.amazeui.org/media/i/demos/bing-4.jpg" alt="">
</li>
</ul>
</div>

 

jc_迟早 - 景德镇-菜鸟

赞同来自:

搜索界面界面乱的。

ahwh

赞同来自:

模态窗口无法 最顶端。。。。。测试多个浏览器。


QQ图片20170421133216.png

 

ahwh

赞同来自:

日历组件   屏蔽日期的时候,只选择年月,,,选择好月份,就屏蔽窗口。。。谢谢。

QQ图片20170421133838.png

yuqicook

赞同来自:

am-switch 带文字开关组件 am-switch-lg后,文字不居中 

文晓港 - 97年的红薯

赞同来自:

1. a:focus 为什么要写outline? 不是很理解 每次做项目都要覆盖掉 感觉影响美观

2. 滚动条能做美化处理 就很赞了!

3. 下拉选框的 下拉按钮箭头 没有垂直居中  建议 i 标签的属性加上 vertical-align: middle;

QQ截图20170510163620.png

 

云南金大玉

赞同来自:

5、建议:

建议下拉组件增加二级菜单,以及三级级菜单。


无标题.png

 

要回复问题请先登录注册