ui/ux网站模型设计指南?
发布网友
发布时间：2022-04-24 13:16
共6个回答
懂视网
时间：2022-05-13 16:38
赞助商链接
在网页设计或 APPUI设计中，为了更好的规范设计文档，设计师通常会花时间去把各种 UI 元素组织起来，比如字体大小、段落行距、按钮颜色、尺寸等等，制作 Style Guide 虽然会浪费一些时间，但却有其它方面的好处，比如确保 UI 设计风格保持一致性，让开发人员遵循风格指南去开发，节省沟通时间。
今天设计达人网小编为大家整理了21个不错的 UI 设计说明范本，设计师们可以按照这个范本来为自己的项目做一个 UI 设计说明，有了这个设计风格指南，也能看出自己的作品是否整洁规范并提高沟通效率啦。
1. UI Style guide
点击查看
2. Process Assets
点击查看
3. Product guidelines
点击查看
4. Duolingo Design Guidelines
点击查看
5. UI Style Guide
点击查看
6. UI Library
点击查看
7. EL Passion UI Style Guide
点击查看
8.WIC Style Guide
点击查看
9. Brian Johnson – Style Guide
点击查看
10.Colour And Type
点击查看
11. Colors and interface elements
点击查看
12. Style Guide
点击查看
13. Salesforce UX Product Style Guide
点击查看
14. Lystable UI/X Style Guide
点击查看
15. Uber Brand Guide
点击查看
16. UI Style Guide
点击查看
17. UI Guide
点击查看
18. Introducing the Salesforce Lightning Design System
点击查看
19. Haywire Style Guide
点击查看
20. Branding WIP
点击查看
21. Brand Applied
热心网友
时间：2022-05-13 13:46
设计应用程序和网站带来了特殊的挑战：
1.促进复杂的任务和工作流程2.用户能够理解和管理复杂数据3.适应各种用户角色，需求和流程
设计的价值
成功的应用程序设计的关键不是一个好功能，一切都取决于用户体验（UX）和用户界面（UI）。
您的应用程序用户在打开应用程序时会首先看到什么？用户首先看到的是登录页面。什么是目标网页？这是用户了解应用程序或站点是否满足其要求并满足需求的起点。它必须具有吸引力，并包含一些号召性用语按钮，以使用户知道下一步该怎么做。
什么是UX设计？
UX（用户体验）设计是创建可为用户提供有意义和相关体验的产品，系统或服务的过程。这涉及获取和集成产品的整个过程的设计，包括品牌，设计，可用性和功能方面。它还包括人机交互和产品所有权的有意义和有价值的方面。UX处理内容和站点地图的体系结构。
UI（用户界面）设计，是UX设计的一个重要方面，它是UX设计的一个子集，因为UX设计涵盖了其他许多领域。信息体系结构（IA）是用户体验设计的第二个最可行的方面。
UX设计可帮助用户实现目标。它不仅专注于创建可用的产品，还涵盖了用户体验的其他方面。UX设计的主要任务是创建可以量身定制的产品，以满足用户的特定需求，但提供可预测的功能。换句话说，UX设计旨在研究用户行为并了解用户动机，设计更好的数字体验。
UX设计原理
1.层次
层次结构是设计师的重要内容之一，可帮助用户轻松浏览产品。它包括：a）信息体系结构b）视觉层次结构
2.一致性
在大多数情况下，可以通过使用一套针对如何为特定设备或格式设计产品的正式准则来实现。
3.确认性
需要防止错误，用户可以不小心做任何重要的或不可逆的动作确认。
4.用户控件
“撤消”，“后退”，“搜索”按钮以及键盘快捷键是使用户可以控制网站或应用程序的好方法。
5.辅助功能
对于尽可能多的人易于使用该产品至关重要。用户体验设计应该消除人们使用产品时的障碍，无论这些障碍是暂时的还是永久的。
用户体验设计过程
概括地说，下面是UX设计过程的步骤：
- 用户研究
设计
UX线框图、UX原型、UI设计（视觉和交互）
用户测试
UX设计部分
交互设计
创建具有深思熟虑的行为的引人入胜的界面。用户和技术之间的简单清晰的交流。交互设计负责使人与单个用户界面或多个界面（或系统）之间实现交互的功能。
线框和原型
在最终设计之前，演示网站的基本组件作为任务或交互式原型的模型。
信息架构图
有效且可持续的方式组织，组织和标记内容。
用户研究
通过观察任务分析和其他反馈方法来了解用户的行为，需求和动机。
什么是UI设计？
UI用户界面设计是为计算机和软件设计用户界面的一门学科，重点是响应性和美观性，最大程度地提高了可用性，以营造良好的用户体验。作为UX的一部分，UI设计更着重于颜色和版式。简而言之，UI设计是视觉设计和交互设计的组合。
UX设计着重于将按钮放置在哪里以便用户轻松找到它，而UI设计将考虑如何使此按钮看起来更美观以使用户想要按下它。
UI设计精心设计了一种通用的视觉语言和层次结构，可增强用户与您的产品互动的方式。UI汇集了交互设计，视觉设计和信息体系结构中的概念。
UI设计原则
1.结构。它关注整体用户界面架构，并且模型应该清晰，一致，可识别，并且将相关的事物放在一起，将不相关的事物分开，并使相似的事物彼此相似。
2.简单性。设计应该使简单，通用的任务变得容易，以用户自己的语言清楚，简单地进行通信。
3.能见度。没有多余的信息。设计应使给定任务的所有所需选项和材料可见，而不会分散注意力。
4.意见反馈。以清晰，简明的方式告知用户并了解所有相关操作，状态或条件的变化，错误或异常。
5.宽容性。设计应具有灵活性，以允许通过撤消和重做来减少错误和误用。
6.重用性。设计应重用内部和外部组件和行为，保持目的的一致性，而不仅仅是任意的一致性。
UI设计过程
1.功能需求收集。
2.用户和任务分析。
3.信息架构。
4.原型制作。
5.可用性检查。
6.可用性测试。
7.GUI（图形用户界面）设计。
8.软件维护。
UX设计师的典型任务各不相同，包括用户研究，创建角色，设计线框和交互式原型以及测试设计。
简而言之，UX设计人员参与了广泛的用户研究，制定信息体系结构以及创建用户个人资料。UX设计师不一定具备视觉或图形设计技能，但是必须了解心理学和系统设计。
UI设计师同时尝试将复杂的结构分解为易于理解的简单格式，以方便最终用户。因此，UX / UI设计人员都致力于为用户提供有效的体验。
热心网友
时间：2022-05-13 15:04
热心网友
时间：2022-05-13 16:39
1. 发掘用户需求，打造极致的体验
产品体验是以用户为中心的，产品体验设计师应该是最了解用户的群体之一。
成功始于好想法。体验设计师们采用调研、脑暴等方式，发掘用户的潜在需求。
为用户带来更易用、更高效、更舒适的产品体验，从而让他们更爱你的产品。
2. 推动执行落地，打造有效的创新
发掘到产品面临的问题及用户需求后，不要让闪光点被淡忘，及时进行有效的落地实行，才能实打实解决问题。
3. 搜集用户反馈，推动产品优化
产品上线不是体验设计的最终结果，用户反馈才是对体验设计质量的检验。
反馈不好，再次找问题、解决问题，以此推进产品设计的持续优化。反馈好，皆大欢喜。
热心网友
时间：2022-05-13 18:30
网站模型可帮助您节省资金，同时提高最终产品的用户体验。在ui/ux网站模型设计指南中了解操作方法!
ui/ux网站模型设计指南?它与线框和原型有何不同?您如何将一个人放在一起?这些正是我们在设计网站模型时所要研究的问题的类型。
除了研究网站模型所包含的基本方面之外，我们还将研究如何在模型工具中设计模型，以及它可以给您，您的团队和最终产品带来的好处。我们还提供了一些灵感来源，以帮助您克服这一创意障碍!
目录
1、什么是网站模型?
2、为什么要设计网站模型?
3、逐步设计网站模型
4、网站样机设计的最佳做法
5、为什么您的网站模型应具有响应性?
6、设计师如何制作响应式模型?
7、模板资源
一、什么是网站模型?
在Web设计领域，网站模型是网站外观的高保真模拟。网站模型将线框的结构和逻辑与最终产品将具有的图像，图形和UI元素结合在一起。
但是，尽管网站模型不包括您将在原型和最终产品中看到的过渡和可用功能，但它们通常包括基本的导航和交互。简而言之，样机可以帮助我们定义：
信息架构：您如何逻辑和分层地组织网站信息
用户流程：用户如何与您的网站和导航UX交互
视觉层次结构和布局：所有元素如何显示在您的网页上，它们的大小和相对位置以及之间的间距
颜色：几乎总是包含您将在最终产品中使用的配色方案
字体：包含最终产品将具有的确切字体类型，大小和粗体
图片：使用SVG和高质量图片，它们可以完全反映出最终产品中将包含的图片
相互作用：
简而言之，网站模型可帮助您定义产品的所有重要因素，以确保在开始昂贵的编码之前就可能获得最佳的用户体验。因为在此阶段，您所做的任何更改都将由您支付。
二、为什么要设计网站模型?
设计网站模型是个好主意，原因有很多。简短的答案是，它可以更有效地将您的产品推向市场，降低开发成本，并增加其长期成功的机会。这是如何做：
尽早发现设计错误
将网站模型组合在一起时，无论从功能上还是从外观上，您都可以看到您的设计是否真正有效。它们使您可以迭代设计，直到达到完美的美学和谐。
构建网站屏幕模型可以帮助您在最终开发的产品之前掩盖不适合的视觉组件。在样机阶段，您已经在评估元素之间的视觉层次。
尽早实施有价值的反馈
网站模型还使您有机会在开始任何编码之前从客户和利益相关者那里获得有价值的反馈。向客户提供高保真，可点击的网站模型是使他们确信您的设计方法适合其产品的绝佳方法。
您还将有机会进行一批用户测试，以帮助确保您以对目标用户角*好的方式设计产品。除了发布后的错误修复和持续更新之外，这将防止以后产生巨大的开发成本。
改善与开发团队的协作和沟通
网站模型缩小了跨职能团队之间作为沟通工具的差距，并确保顺利进行设计交接。移交过程是产品开发中至关重要的时刻。当您将最终设计交给开发人员时，需要他们提供将原型编码成生动，令人呼吸的产品所需的资产和指南。
完整的网站模型，理想情况下是与包含样式指南，设计规范，样式和组件的设计系统结合在一起，可确保产品没有不确定性，从而帮助开发人员。
设计和开发之间来回的往来将更少，因为每个人都将拥有他们所需的信息，并且您将避免进行昂贵的返工。
三、逐步设计网站模型
如果不适合任何人，则设计网站模型是没有意义的。在使用网站样机工具时牢记用户，将帮助您更快地设计成功的相关网站。因此，以下许多步骤很大程度上取决于用户测试和研究。
就像这样：定义一个最小的可行产品，创建您的模型，与用户进行测试，解决问题，然后再次测试直到用户满意为止。
1.用户研究
识别市场机会
但是，在您甚至梦想设计网站模型之前，您还需要回答一些重要问题。
您的网站是干什么的?是的，这听起来似乎很明显，但是您听说过多少个网站是从一个目标和受众开始的，然后在开发后又以另一种方式转向?
提出这个重要问题可以节省很多时间。在此阶段进行调整并完全改变您的想法是可以的，也是绝对可以原谅的。
创建用户角色
这导致我们进行用户研究。当您认为自己对网站的主要目标有一个清晰的了解时，那就是该到那里去询问潜在用户是否真正需要它的时候了。事实证明，他们还需要其他东西，从而使您的想法发生变化。在线调查以及咖啡店访谈非常适合识别市场需求。
确定了要为网站用户解决的问题后，您需要在开始制作网站样机之前具体了解用户角色(您网站的主要用户)的身份。您可以在用户研究阶段收集此类信息，汇总数据并从大众中创建单个角色。
角色数量取决于您的项目，但请记住：越少越好。设计网站模型时，记住两到三个角色要容易一些，而不是20个，这会使最终产品更具凝聚力。
信息架构
既然您已经拥有了用户角色，那么在您为他们设计网站模型之前，请确保已对您的信息体系结构进行了深思熟虑。为什么不邀请适合那些角色的人参加卡片分类测试?
卡片分类是一种用户测试，可帮助您确定用户的最佳站点地图。在此阶段执行此操作将帮助您确定在网站上组织信息的最佳方式，以便您的用户可以轻松找到它，从而带来令人敬畏的用户体验。
现在，您已经掌握了来自用户研究阶段的所有重要信息，接下来您可以袖手旁观，开始设计网站模型。
启动网站模型的主要方法有两种：从线框开始或直接跳入设计模型。在Justinmind，我们建议您采用第一个选项，以清晰地了解屏幕上显示的元素，元素的位置–元素彼此之间的关系以及它们的作用。
在本循序渐进指南中，我们将假定您已经准备好原理图，并已完成结构，UI布局，层次结构和功能的映射。因此，让我们开始使其看起来更漂亮!
2.平面设计-使您的网站模型更漂亮
导航和号召性用语
要特别注意导航元素和号召性用语的设计。它们需要清晰，易于理解和大胆，但决不能压倒一切。
视觉层次结构，例如在相关字段旁边放置标签，以及在较长的输入字段中将相关主题分组在一起，可以提高可读性。确保您考虑了不同的按钮设计概念，大小，阴影以及如何使用它们。
颜色
色彩心理在用户体验中起着关键作用，并且可能对用户产生深远的情感影响。选择具有出色UX的配色方案，同时使您的品牌更令人难忘，这是很有意义的。
色彩可以使您的网站元素具有对比感和层次感，使其使用起来更加直观，并且更加引人注目。另一方面，错误地选择颜色可能会使您的产品在用户看到产品的那一刻就沉没。
一个明显的例子是将CTA按钮设为红色，该颜色通常与删除和错误相关。
我们建议使用诸如Adobe Color CC之类的颜色组合工具来查找要在您的网站或应用程序模型中使用的互补色。
图像和图标
对于图像，质量至关重要。记住–您的模型应尽可能接近您的最终产品。您应该始终将目标放在高质量的PNG或SVG文件上。实际上，通过Justinmind，您可以充分利用我们与Photoshop的集成来设计醒目的，像素完美的交互式PSD模型!
对于UI元素，始终坚持使用UI套件始终是一个好主意，以便用户已经熟悉您使用的设计语言。在Justinmind网站上可以下载许多UI套件，用于Web，iOS和Android，以及许多免费的图标集和模板。
版式
排版是引导用户关注，提高整体理解力以及确定网站模型中元素和文本层次结构的绝佳工具。
但是，太多的字体可能会发生冲突并导致震撼的体验。作为一般的经验法则，您应该努力在网站模型中使用不超过两种或三种不同的字体。只需更改字体的大小和粗体，就可以帮助定义对比度和层次结构。
对于您包含在网站模型中的任何正文文本，其行距的目标是140-180%。对于标题，标题和缩影，请确保您的文本永远不会局促!
内容
当我们谈论网站模型中的内容时，我们通常同时指文本和图像。尽早考虑内容是一个好主意，因为它通常会影响网站模型的布局和设计。
您决定在模型阶段包含多少内容取决于您正在设计的网站的类型以及用户进行测试所需的最少信息，我们将在下面详细介绍。
但是，用文本和图像填充产品的内容区域通常可以帮助用户确切地了解产品完成后的外观。尽管可以仅在每个文本框中粘贴Lorem Ipsum，但我们还是建议尝试使用真实的标题和标题文本来帮助您全面理解网站模型并了解每个屏幕的功能。
3.添加互动
对网站模型的图形设计进行排序后，就该添加一些交互设计了。如前所述，我们认为样机应该是可单击的，否则，在与利益相关者交流想法，进行用户测试以及与开发人员协作时，样机的效率将大大降低。
当您向网站模型中添加交互时，请专注于产品中的基本导航，而不是其高级功能。您应该以添加足够的交互元素为目标，以便用户可以浏览网站模型，轻松地逐页传递。
用户在模型中流动
用户流是用户在浏览您的网站模型时从进入到退出所遵循的路径。您可以根据用户角色浏览网站的方式来映射这些内容。这里有些例子：
对于已建立的每个用户流，订购网站模型的页面，并添加用户实现模型所需的导航交互设计。
4.用户测试
建立布局，视觉设计和基本交互之后，就可以开始用户测试了。您可以通过许多不同的方式对网站模型进行用户测试。但是，我们同意可用性极客在网站可用性测试中的职位，即可用性测试主要分为三类：探索性，评估性和比较性。
探索性的：在产品开发的早期用于评估初步设计或模型的有效性和可用性，以及用户的思维过程和概念理解。
评估：在产品开发中途使用，或用作技术评估的整体可用性测试。评估该技术的实时试验，以确定其满意度，有效性和整体可用性。
比较：比较两个或多个教学技术产品或设计，并区分每种产品的优缺点。
在可点击的网站模型上的用户测试应侧重于探索性方面。这样做的目的是测试样机，以了解用户对设计的理解程度。可以理解。
5.应用更改，迭代和更多用户测试
此步骤很简单，但通常需要重复几次。收集用户反馈并在网站模型中进行适当的修复。然后再次测试。最重要的是：您越早解决问题并进行迭代，它就会越便宜。
6.开发人员交接
网站和应用程序模型设计的最后阶段是将其交给开发团队，这样他们就可以开始对产品进行编码。但这并不像直接向他们发送样机并说“玩得开心!”那样简单。
您需要确保为开发人员提供相关的功能规范文档，例如样式表，项目范围，站点地图，用户流程，用户要求等。
值得庆幸的是，Justinmind样机工具使您在创建网站样机后只需单击几下即可生成此功能规范文档!
四、网站样机设计的最佳做法
说明你的样机是一个模型
确保您的用户和涉众在交互性方面了解该模型实际上提供了什么。例如，如果某个视频无法播放，并且他们实际上无法注册您的地板清洁剂的终生供应，请确保在提供样机时明确说明!
始终与合适的用户进行测试
返回您的用户角色，并确保您正在与符合您已定义的用户类型的人员进行测试。
简而言之，毫无意义地问一个对您的网站模型的主要目标或主题不感兴趣的人。
在模型中构建备用用户路径
利用各种潜在的用户流(而不仅仅是一种)来构建您的网站模型。这为您提供了关于用户如何浏览产品并与之交互的更可行的见解。它还打开了与用户讨论有关产品导航的区域。
客户端测试就是用户测试
您应该将客户端测试视为用户测试的一种形式。在开始测试之前，请确保客户端测试人员具有明确的说明。仅仅因为这是他们的最终产品，当您给他们一个模型进行测试时，不要将其他三个技巧视为理所当然!
五、为什么您的网站模型应具有响应性?
设计具有响应能力的网站模型是一个好主意，因为它可以帮助您实现以下目标：
移动优先索引
您可能之前曾听说过，自2019年中以来，Google已采用移动优先的方法对网站建立索引，以提高总体可用性。
您可能会问“移动优先索引如何改善总体可用性?” 答案在于以下事实：超过50%的Web流量来自移动设备。那么，有意义的是，无论用户是否在台式机上查看Google，Google都因此将最适合这些设备的网站编入索引。
吸引更多用户
由于响应能力是影响网站可用性的一个方面，并且由于创建网站模型的整个想法都是为了改善用户体验，因此尽快处理响应因素是有意义的。
此外，如果您设计了一个响应式样机，则意味着当您将其编码为生动，令人呼吸的产品时，您已经可以接触到更多的用户。使您的网站具有响应性，对业务和可用性都是有意义的!
存钱
响应式样机设计如何帮助您省钱?通过从设计的早期阶段就着眼于响应能力，可以确保避免进一步的设计问题。
确保您的网站适合较小的设备，使您可以重新考虑整个网站的设计。它迫使您提出一种在台式机和移动设备上都看起来不错的布局。
反过来，当涉及到元素，字体和整体布局的位置时，这也将使您能够发现潜在的设计问题。
开发后必须对设计的布局进行更改可能会导致成本高昂并引起很多麻烦。节省您所有麻烦，使您的网站模型能够快速响应。
确定最佳信息层次
通常在手机，平板电脑甚至智能手表等移动设备的屏幕上，由于这些设备的分辨率较低，因此显示的内容会更少。这意味着您需要确保用户首先查看最重要的内容，这会影响您如何考虑网站样机的用户流。
六、设计师如何制作响应式模型?
设计人员通过使用断点来响应其模型，断点是宽度的点，设计布局可以在其中改变并适应较小的分辨率。
结果，许多设计师采用了Twitter开发的Bootstrap框架。Bootstrap框架使用12列网格布局。为什么?因为通过提供将屏幕划分为不同断点的最佳安排，这很容易实现响应式设计。
七、模板资源
想设计一个网站样机，但不确定从哪里开始?关键是灵感!在设计网站模型时，UI设计是首要任务。
但是，要创建引人入胜的UI设计，您可能想要提高您的图形设计技能，或者只是查看一些一般的艺术和设计网站。您肯定会从这些图形设计之一中得到启发。
尽管UI设计对于用户体验很重要，但是要能够为目标受众创建最佳的用户体验，它也可以帮助您彻底了解UX设计的基础。
即使您认为自己是UX的资深人士，重温该行业的最新发现和发展也不会有任何伤害。
如果您希望削减成本并以最佳的保证可用性将产品更快地推向市场，那么网站模型是一个明智的主意。它们也是尽早将UX集成到您的设计中的一种好方法，可确保您从一开始就始终与目标用户保持联系。
此外，网站模型可帮助您的团队团结起来，并且是促进设计与开发之间的协作和交流的好方法。呈现网站模型也是从利益相关者处进行验证和购买的好方法。项目经理和客户都将了解设计的方向以及原因。
最后，在移动优先编制索引的时代，创建网站时从一开始就不实施响应式设计是虚拟的，并且是财务上的自杀。样机可以帮助您从一开始就将这种实践融入您的设计中，而该项目仍然便宜，热情和模糊。
相关推荐
成为一名出色的UI/UX设计师必备技能有哪些
ui/ux网站模型设计指南
ui人性化设计界面的11个技巧
从小白到ui设计大咖进阶指南
零基础小白专科学UI设计有出路吗
UI设计先培训后交学费*真假
现在学ui设计都是傻子
女生适合做ui设计师吗有多累
0基础成为UI设计指南
ui设计培训后失业
零基础学ui设计真他妈惨
ui设计培训四个月*
热心网友
时间：2022-05-13 20:38
