摘要：这个话题在前边已经写过一些看豆瓣上关于一些新的想法中间一些想法酝酿了比较长时间了这次也当作是一个整理吧这篇文章在界面设计方面写一点配图也是网上的没有经过加工需要点想象啊由于我没有足够的设计能力相关技术也不成熟因此暂时不会有双十一网页双十一没
这个话题在前边已经写过一些, 看豆瓣上 关于 WebCity 一些新的想法
中间一些想法酝酿了比较长时间了, 这次也当作是一个整理吧
这篇文章在界面设计方面写一点, 配图也是网上的, 没有经过加工, 需要点想象啊
由于我没有足够的设计能力, 相关技术也不成熟, 因此 Demo 暂时不会有
双十一没有买东西, 网页没有细看, 只是扫了一眼淘宝京东跟蘑菇街
京东加强了导航难看实用, 蘑菇街设定了区分明确的板块风格清晰.. 兴趣不大
天猫做了个地图, 这一点我觉得很有意思, 某种程度上也 WebCity 有点像
当 Web 上内容更加丰富, 怎样呈现才是更友好的? 至少不能用机械化的列表!
我想这是一个网站朝着类似方向发展的另一个征兆
WebCity 并不是一个只是为了桌面上方便人查找网站而设想的页面
特别因为线上社区大量增多, 桌面电脑大小的屏幕通常是不够的
WebCity 设想的场景是地铁广告那么大的屏幕, 支持手势语音直接操作
当然出于各种原因, 一定是基于桌面版开发和兼容的
我设想达到的是这样一些目标:
索引
现在网站越来越多, 以搜索作为入口是不够优化的, 也不够友好
我猜想人们喜闻乐见的还是在页面上平铺开来, 还有按照分类分开多个页面
所以简单理解就是会有非常多网页, 每个网页上有很多卡片式的入口同向站外
但是就像人们无论去哪里都先上街一样, WebCity 当中的"通道"的概念必不可少
同时街道的作用也可以标记位置, 因此人们不需要记忆各个建筑的经纬度
同时街道直接相互联通, 作为在建筑直接切换的途径, 也可以说是引导
因此作为索引, 一方面收录网站, 一方面建立网站之间的关联
装饰
上边是最初觉得适合 WebCity 用的一个样式, 因为这个排列显得美观
美观的界面才有可能被人用在桌面, 或者广告, 或者用来装饰墙体
试想未来城市里到处是屏幕, 也许全都会显示可交互的广告
而这样的界面除了美观, 也对应了人们熟悉的网上一个经常光顾的场所
这个网络和现实产生关联的感觉, 比起海报或者广告片也挺有趣的
我倾向于和现在的网站一样采用卡片的简单结构, 将装饰放到配色和背景上
这样的界面易于使用算法进行堆积和调整, 每个单元能相对一致得受到关注
极端的情况比如广告颜色太多, 卡片也能通过间距一起降低相互的干扰
而图中卡片的倾斜, 纯粹是为了在视觉上避免单调
关联
前面已经提到了"通道"的概念, 作为一种手段, 展现出网站的关联
用另外一个角度理解, WebCity 就是为网上那么多的网站创造一些关联
假设人们因为一些需求通过 WebCity 去访问一些网站极其相关信息,
那么, 将有巨大的流量, 一方面要更快满足流量需求, 一方面激发更多的需求
找个比喻就像植物的根系, 伸向土壤中的养分, 同时让土壤更活跃
于是这些卡片组成是连贯的整体, 即便切换位置, 也会加有用意的专场动画
原来展示, 两个位置是互联网地理上相关联的, 那是这一边, 这是在这一边
所以卡片之间会留一些入口, 提供游客停下交流的地方, 对, 就像阿尔法城的聊天
当然我期待的是还有其他的互动方式, 相对到那时候自然而然会冒出来
而这些是模仿现实中的城市, 一个地方, 就有一个地方人们留下来的氛围
映射到现实世界
WebCity 上地点也可以和现实中对应, 比如外滩, 恐怕就能占满整页
还记得前边说的大屏幕, 这些屏幕也许就在对应的广场或者街道出现
虚拟世界总之不会继续是漂浮在空中楼阁, 而是跟现实充满了交点
界面上会随着出现很多跟地点配合的元素, 在背景配色以及布局上边
类似前边给出的方案, 我尝试在网上挖更多风格类似的素材
中文关键词"菱格", 英文关键词 "rhombus pattern", 特地找了些规则带边框的
关于格子的大小. 有几个例子能看到, 多样的尺寸效果更漂亮
考虑我不会设计图案, 先从网上的图案想象一下成为卡片可能达到的效果
相对来说, 方格的界面规整很多, 传达内容更清晰, 但是画面感较弱
虽然我个人对菱格更喜欢, 但在 Web 的实践当中也许方格经常会实用
如果允许更随意的排列, 相信画面的效果会比菱格还要好很多
只是这样的话就不能通过程序直接生成和后期处理了
而且这样的格子有的没有明确的顺序, 进行关联时要再额外做考虑
我只是想说, 当图形界面引入更多样的布局, 真的能非常漂亮
还有一张图让我很有启发, 就是下面这张, 图中间有一条分割线
这条线像是一条街把所有的方块都联通起来了, 成了一个整体
这样用户访问时就有了一个极好的引导, 而不是随意地扫视这些方块
网页上虽然浏览的方式不同, 一条街线还是很能把注意力贯穿起来的
以上零零碎碎都还是想法, 以后想到会继续补充
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/8976.html
摘要：先来看看的样式吧这里值得一提的是我们的定义的是这样写的好处是它能适配不同类型的手机的界面宽度，毕竟现在市面上手机类型太多，我们不可能为每一款手机都设置一个宽度。其次，我们为什么要定义呢这样可以使我们的页面充满整个手机页面，不会滚动。 昨天用html5写了一个手机密码锁界面，中途碰到一些小问题，解决了后总结了一些小方法来和大家一起分享，如果有不成熟的地方希望大家指出来，大家有更好的方法我...
摘要：先来看看的样式吧这里值得一提的是我们的定义的是这样写的好处是它能适配不同类型的手机的界面宽度，毕竟现在市面上手机类型太多，我们不可能为每一款手机都设置一个宽度。其次，我们为什么要定义呢这样可以使我们的页面充满整个手机页面，不会滚动。 昨天用html5写了一个手机密码锁界面，中途碰到一些小问题，解决了后总结了一些小方法来和大家一起分享，如果有不成熟的地方希望大家指出来，大家有更好的方法我...
摘要：前面不短时间持续投入了时间在做应用架构方面的考量一个是冒险进行了一次应用架构的调整另一个是跟进了的进展当然实际上是同一个事情也许错过的比收获的还多一些不过能走到现在也算幸运了毕竟单页面应用还面临很多不成熟之处国庆长假过去不少现在的想法估计会 前面不短时间持续投入了时间在做 React 应用架构方面的考量一个是冒险进行了一次应用架构的调整, 另一个是跟进了 Redux 的进展当然, 实际...
摘要：前面一段时间对和两者的关系感到比较困惑我使用的动态语言揉合太多范式在这一点上很难做出明确透彻的区分不过经过这段时间琢磨相对之前感觉要好一些了有了一些自己的想法后面自己的部分会有不少没有验证的地方所以应该当成感想来看需要说明我的经验来自动态语 前面一段时间对 FP 和 OOP 两者的关系感到比较困惑 我使用的动态语言揉合太多范式, 在这一点上很难做出明确透彻的区分 不过经过这段时间琢磨相...
阅读 2643·2021-09-13 10:26
阅读 1905·2021-09-03 10:28
阅读 1977·2019-08-30 15:44
阅读 794·2019-08-29 14:07
阅读 383·2019-08-29 13:12
阅读 2141·2019-08-26 11:44
阅读 2334·2019-08-26 11:36
阅读 2001·2019-08-26 10:19
