BewlyBewly
BewlyBewly copied to clipboard
BewlyBewly
关于顶栏UI的一些建议
我觉得顶栏在网页中应该是一个一体化的存在，目前的ui显得太割裂了。
首先是目前采用了悬浮的设计，这一点没有什么问题，但是它把顶栏ui分成了3部分：logo，搜索框和功能键区，同时这三个部分长度不一，中间有较大空缺，这样会导致在视觉上的不连贯，从而影响下方网页的浏览体验。
在动态页，本身顶栏的底部应与下方元素平行，而分开的顶栏没有做到这一点。
在首页也有体现，各部分之间的空缺导致一些控件的排列看起来很随意。
Google m3设计官网的“顶栏”是悬浮一体的
一个UI设计灵感网站，顶栏设计紧凑
另一个UI设计参考网站，和BewlyBewly采用类似的遮罩，但是元素较为一体
参考建议
a. 去除顶栏三个部分的阴影，取消背景遮罩，让它和顶部空白融为一体。
有点像GitHub的设计
b. 把整个顶栏连成一体，缩减三个部分间的空隙。（到时候可能会有一个巨长无比的搜索框？）
↑这样看起来好不少，当然也可以试图把dock栏加到空白处
↑自己改了一下，还有细节没调好。搜索框确实太大了，虽然排版美观了，感觉可以加一些控件
c. 始终显示顶栏背景，同时采用透明度更低的材质，颜色和页面背景要有一定差异，阴影之类的收敛一点
类似于win11任务栏
我自改了一下，显然效果没有达到我自己的要求
目前感觉不管是加长搜索条或不用悬浮效果都感觉效果不是特别好，不过十分感谢你提出了一个设计上的建议 能否有其他你认为不错的顶栏设计，可为后续ui更新作参考和调整？
感谢你的答复，如果我找到好的设计我会继续分享😉
获取Outlook for Androidhttps://aka.ms/AAb9ysg
From: Hakadao @.> Sent: Saturday, April 13, 2024 9:14:52 PM To: hakadao/BewlyBewly @.> Cc: pasical @.>; Author @.> Subject: Re: [hakadao/BewlyBewly] 关于顶栏UI的一些建议 (Issue #549)
目前感觉不管是加长搜索条或不用悬浮效果都感觉效果不是特别好，不过十分感谢你提出了一个设计上的建议 能否有其他你认为不错的顶栏设计，可为后续ui更新作参考和调整？
— Reply to this email directly, view it on GitHubhttps://github.com/hakadao/BewlyBewly/issues/549#issuecomment-2053643632, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A2Y2FCVJHV5AUWUJL33GWSTY5EVUZAVCNFSM6AAAAABGFJB62WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANJTGY2DGNRTGI. You are receiving this because you authored the thread.Message ID: @.***>
这一块可以塞bilibili logo里 在显示宽度足够的时候自动展开 或者是往下滑自动隐藏
我说说我为什么要提这个 因为在我的显示器上这个东西完全可以放在顶栏上面 而且又和哔哩哔哩的logo错位 这让我个人看的很难受（个人感受不代表所有人）
两个概念网站：
https://whimsical.com/?ref=pixelfika https://www.cosmos.so/
十分感谢提出，第二个网站顶栏真的好看 要改的话我还是怕用户不适应的，因为习惯养成后不太好改
还有这几个，我觉得可以考虑降低一下搜索框的存在感，不打开的时候会只保留一个图标缩到右侧
https://mymind.com/mobile
https://www.1x.tech/
https://www.herve.paris/en/home