bwin必赢官网登录交互案例研究 如何设计电子图书类APP的视觉效果?
发布时间:2023-10-17
 。这 是一个概念性电子图书馆平台,专为喜欢阅读、讨论并视书籍为挚友的人而设。 ( *Sakhi 在印地语中是挚友的意思) 。  Sakhi 也是 Piyush Kumar 作品集中的一个概念性项目,旨在让自己站在用户界面设计师的角度进行设计。该项目总共耗时7-10天。  在研究过程中的一个重要组成部分是进行竞争分析,这有助于设计者了解其他电子图书馆平台已经在做什么,找出他们的痛点,并尝试解决这

  。这 是一个概念性电子图书馆平台,专为喜欢阅读、讨论并视书籍为挚友的人而设。 ( *Sakhi 在印地语中是挚友的意思) 。

  Sakhi 也是 Piyush Kumar 作品集中的一个概念性项目,旨在让自己站在用户界面设计师的角度进行设计。该项目总共耗时7-10天。

  在研究过程中的一个重要组成部分是进行竞争分析,这有助于设计者了解其他电子图书馆平台已经在做什么,找出他们的痛点,并尝试解决这些问题,从而改善用户体验。

  ·缺乏沟通:几乎感觉自己被网站抛弃了,不知道应该做什么,因为网站极度缺乏沟通

  在了解痛点之后,Piyush Kumar 对设计着陆页流程时需要关注的重点有了一个简单的想法。他开始在一张纸上构思粗略的想法,将脑海中的想法铺陈开来,并将其可视化。重点是对着陆页的流程有一个粗略的概念,这有助于他更接近实现网站的目标。Piyush Kumar 希望实现一个简单而强大的流程,不会让用户被信息淹没,而是引导他们一步一步地了解可以做什么。

  在快速绘制了一些纸上草图后,设计者觉得有必要在Figma中创建网站的基本结构,这样就可以尝试不同的类型设置和网格布局,并简要了解网站需要哪些组件。

  任何网站最重要的部分之一就是它的文本。文字的语气和风格在决定网站的整体氛围方面起着非常重要的作用。无衬线字体的 嗨,Ritik,有什么可以帮您?会给人一种友好的感觉,而用衬线字体写同样的信息则会显得有些专业。

  Piyush Kumar 想为着陆页营造一种友好和吸引人的氛围,因此决定使用Manrope字体。这是一种相当不错但被低估的无衬线字体。

  选定字体后,他开始着手设置整个网站都可以使用的文字样式。首先从正文开始,因为正文的内容要比标题多得多。大多数网页浏览器默认的正文文字大小为 16px。

  创建正文文本样式后,他又为不同的标题、正文、小正文、标签等创建了文本样式。此外还创建了两个标题 H1 到 H6 的标题 和 H1 到 H6 的小标题,这将最终帮助其根据较小的屏幕尺寸调整文本。

  色彩在营造网站氛围和基调方面也起着非常重要的作用。由于这是一个与书籍相关的平台,设计师希望使用书籍熟悉的颜色,如棕色、红色、黑色和白色。

  他为每组颜色创建了色调和色调样式,如主色调、辅助色调、中性色调和点缀色调。

  主色和辅助色的使用都考虑到了 WCAG 的要求。大部分文字或按钮等组件都通过了 AAA 或 AA(某些情况下)对比度标准。为了提高效率,使用不同字体重量的文本和带有色调和色差的颜色分别创建为文本样式和颜色样式。

  网格为网站或登陆页面提供了结构。它也是网站的重要组成部分之一。他在台式机上使用了 12 列布局,在平板电脑上使用了 8 列布局,在移动设备上使用了 4 列布局。此外还使用了 8px 宽行布局,用于网站对象的垂直间距。

  字体、颜色bwin必赢官网登录和网格都已设计完毕,接下来就要开始设计可重复使用的组件(原子设计概念)了。Piyush Kumar 开始制作一些将在整个着陆页面中使用的组件,如顶部导航、搜索框等,确保它们能响应分配给它们的空间。

  顶部导航栏是使用自动布局(间距)创建的,因此它能根据屏幕尺寸的变化保持间距;搜索输入栏根据分配给它的大小(填充容器)进行响应,大多数组件都是使用 Figma 中的自动布局和嵌套自动布局功能创建的,因此组件完全响应。

  但到了一定程度后,设计开始出现问题,比如顶部的导航链接挡住了徽标,因此他不得不为平板电脑和手机屏幕尺寸引入不同的断点,并根据屏幕尺寸调bwin必赢官网登录整设计。

  通过这次用 Figma 设计响应式登陆页,Piyush Kumar 也进行了最终项目总结: