Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

一些改进相关的建议 #3

Open
Alceatraz opened this issue Jul 25, 2023 · 0 comments
Open

一些改进相关的建议 #3

Alceatraz opened this issue Jul 25, 2023 · 0 comments

Comments

@Alceatraz
Copy link

Alceatraz commented Jul 25, 2023

前情提要

我是业余UI/UX设计,职业SRE和DevOps。
本来想找老弟的商务邮箱,但是想了想还是发issue比较合适。一开始打算提PR,但是点开一看好家伙,Cargo 还是配置式页面,那我直接进行一个辞的告。不会写Rust。

只讨论 https://tool.pc.wiki/

已知问题

竖屏布局自适应有问题

1
2

在 Chrome 中所有的竖屏设备全都有问题,根据观察,是在800px时候产生的自适应切换。
页面溢出本身不是问题最多是难看/不精致,但是overflow=hidden导致溢出部分无法查看就是个大问题了, 鼠标或手机是无法拖动,简洁版的按钮是在屏幕外边的,相当于网站都进不去。而且作为工具网站必须需要考虑到可能的情况:我显卡坏了,我不能装驱动,或者进入网络安全模式,没有驱动,我用手机下载USB传到电脑等等。

元素网格

4

  • 三栏内容的两个列间距不一致
  • 第二栏标题文字box不一致
  • 第二栏第三排按钮高度与其他不一致
  • 第三栏前四个按钮与第五个没有对齐
  • 三个栏的元素网格没有对齐

PS: 我知道页面下边那一条是相当于拐上去了,一种老弟式恶搞幽默,我会联想到当时美国日本疫情柱状图太长了都打卷了.jpg

UI/UX 改进建议

仅为一种可能,欢迎深入讨论。(头脑风暴草图,非设计阶段不进行精密排版设计)

6

(本)设计前提:

在保持本页面原有的风格设计并与同类设计比较整合后,推荐使用 Windows10 磁贴设计逻辑:

  • 网页规范中,默认即为竖版滚动,横板滚动的页面与直觉不符并且代码复杂,低性能设备(比如显卡驱动被禁用)可能会卡顿。
  • 网站内容特点为,部分内容相对固定,其他内容高度可变。并且可以通过磁块大小组合快速引导用户的视觉重心。
  • 自定义仿磁贴设计可以有多种基础尺寸和组合尺寸,比如工具集合5列尔工具下载6列,并且可以任意组合尺寸以凸显视觉重心。

本例中:

  • 左上角固定导航、右上1工具集合、右上2工具下载部分组成页面固定部分。站点链接和工具下载(2)构成网页动态部分
  • 固定部分因为内容和数量趋于不变,可以自由设计磁贴排列组合以满足视觉重心,比如上文提到的多基础元素尺寸和组合
  • 动态部分内容会长期维护导致增减和权重变化,相对来说自由度不应过高(参考StackExchange)
  • 简洁版页面的内容远超首页,放开Y轴提供的无限空间,可以将所有的内容均填入。
  • 推荐加入hover功能,提供多个可点击的下载+官网链接,或者附带使用教程等。

附图A: StackExchange

7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant