考研图书，考研图书情报专业
本文授权转自： 交互设计小站（ID：racjiaohu）
最新的案例研究来啦！今天要和各位同学分享是用户体验设计师Piyush Kumar的一个视觉设计项目——Sakhi。这 是一个概念性电子图书馆平台，专为喜欢阅读、讨论并视书籍为挚友的人而设。 ( *Sakhi 在印地语中是挚友的意思) 。
Sakhi 也是 Piyush Kumar 作品集中的一个概念性项目，旨在让自己站在用户界面设计师的角度进行设计。该项目总共耗时7-10天。
项目介绍
角色和目标
·设计登陆页面的流程
·视觉和用户界面设计（网格、布局、组件等）
·通过不同的断点使登陆页面设计具有响应性
登录页面议程
·提高认识：提高对新平台的认识
·建立信任：以对用户有帮助、有吸引力和可靠的方式展示网站
·转化：一旦用户认为网站有用、可靠，就会注册
设计流程
研究和竞争分析
在研究过程中的一个重要组成部分是进行竞争分析，这有助于设计者了解其他电子图书馆平台已经在做什么，找出他们的痛点，并尝试解决这些问题，从而改善用户体验。
以下是 Piyush Kumar 观察到的一些关键点：
·没有明确的 CTA：网站没有明确说明用户应该做什么
·缺乏沟通：几乎感觉自己被网站抛弃了，不知道应该做什么，因为网站极度缺乏沟通
·视觉效果不佳：大多数平台显得沉闷，缺乏简单而强烈的视觉语言
快速线框设计
在了解痛点之后，Piyush Kumar 对设计着陆页流程时需要关注的重点有了一个简单的想法。他开始在一张纸上构思粗略的想法，将脑海中的想法铺陈开来，并将其可视化。重点是对着陆页的流程有一个粗略的概念，这有助于他更接近实现网站的目标。Piyush Kumar 希望实现一个简单而强大的流程，不会让用户被信息淹没，而是引导他们一步一步地了解可以做什么。
探索不同布局的纸上线框图
为视觉设计做准备
在快速绘制了一些纸上草图后，设计者觉得有必要在Figma中创建网站的基本结构，这样就可以尝试不同的类型设置和网格布局，并简要了解网站需要哪些组件。
Figma 中登陆页的基本结构
文本样式
任何网站最重要的部分之一就是它的文本。文字的语气和风格在决定网站的整体氛围方面起着非常重要的作用。无衬线字体的 “嗨，Ritik，有什么可以帮您？”会给人一种友好的感觉，而用衬线字体写同样的信息则会显得有些专业。
Piyush Kumar 想为着陆页营造一种友好和吸引人的氛围，因此决定使用Manrope字体。这是一种相当不错但被低估的无衬线字体。
选定字体后，他开始着手设置整个网站都可以使用的文字样式。首先从正文开始，因为正文的内容要比标题多得多。大多数网页浏览器默认的正文文字大小为 16px。
正文字体
创建正文文本样式后，他又为不同的标题、正文、小正文、标签等创建了文本样式。此外还创建了两个标题 “H1 到 H6 的标题 “和 “H1 到 H6 的小标题”，这将最终帮助其根据较小的屏幕尺寸调整文本。
标题和小标题采用不同的字体大小
不同的正文文字重量和大小
色彩风格
色彩在营造网站氛围和基调方面也起着非常重要的作用。由于这是一个与书籍相关的平台，设计师希望使用书籍熟悉的颜色，如棕色、红色、黑色和白色。
他为每组颜色创建了色调和色调样式，如主色调、辅助色调、中性色调和点缀色调。
各类颜色的色调和色度
主色和辅助色的使用都考虑到了 WCAG 的要求。大部分文字或按钮等组件都通过了 AAA 或 AA（某些情况下）对比度标准。为了提高效率，使用不同字体重量的文本和带有色调和色差的颜色分别创建为文本样式和颜色样式。
主要 CTA 按钮
文本和颜色样式
网格
网格为网站或登陆页面提供了结构。它也是网站的重要组成部分之一。他在台式机上使用了 12 列布局，在平板电脑上使用了 8 列布局，在移动设备上使用了 4 列布局。此外还使用了 8px 宽行布局，用于网站对象的垂直间距。
列式网格布局
Hero Section网格布局
视觉设计
Hero Section
字体、颜色和网格都已设计完毕，接下来就要开始设计可重复使用的组件（原子设计概念）了。Piyush Kumar 开始制作一些将在整个着陆页面中使用的组件，如顶部导航、搜索框等，确保它们能响应分配给它们的空间。
顶部导航栏是使用自动布局（间距）创建的，因此它能根据屏幕尺寸的变化保持间距；搜索输入栏根据分配给它的大小（填充容器）进行响应，大多数组件都是使用 Figma 中的自动布局和嵌套自动布局功能创建的，因此组件完全响应。
组件的响应性
但到了一定程度后，设计开始出现问题，比如顶部的导航链接挡住了徽标，因此他不得不为平板电脑和手机屏幕尺寸引入不同的断点，并根据屏幕尺寸调整设计。
Hero Section说明
完整登陆页面
针对不同断点的设计
手机视图
TAKE AWAY
通过这次用 Figma 设计响应式登陆页，Piyush Kumar 也进行了最终项目总结：
·响应式设计（针对不同的断点进行设计）
· 行动号召应明确，让用户知道对他们的期望以及次要选项是什么
· 保持文案通俗易懂
· 使用 Figma 中的自动布局、约束和大小调整功能
· 有效使用文本和颜色样式
登陆页面的可视化展示
案例链接：
https://medium.com/@piycreates/designing-a-responsive-landing-page-design-in-figma-a-visual-design-case-study-63c6afbeee0a
文章转载：交互设计小站，版权归原作者所有
https://mp.weixin.qq.com/s/2QHla_9C4P1SxHDqZLdzIw
版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。
联系微信：18802086168
联系电话：18802086168
终审 | 吕静
编辑 | 区钰珊
点这里，学习更多设计知识！
考研图书(考研图书情报专业)