网页设计看这篇文章就够了 网页设计综合指南 (设计的网页设计)

本文目录导航：

• 《网页设计综合指南》：网页设计看这篇文章就够了
• 在新媒体流传环节中,用户体验表如今哪些方面
• 关于网页设计，你敢说你的照应式网站够低劣么

《网页设计综合指南》：网页设计看这篇文章就够了

设计师和开发人员在构建网站时，须要思索很多事件，从视觉外观到配置设计。

为了简化这个环节，咱们预备了这个指南。

限于篇幅限度，将这一指南分为三局部，此为第三局部内容。

本篇蕴含内容三、移动端适配3.1 照应式设计3.2 手势操作四、不阻碍设计4.1 弱视用户4.2 色盲用户4.3 盲人用户4.4 键盘适配五、测试5.1 继续测试5.2 页面加载测试5.3 A/B测试六、开发交接七、总结三、移动端适配

如今，网站用户中有50％左右的用户经过移动设备访问。

这对网页设计师象征着什么？象征着咱们肯定为网站启动移动端适配设计。

3.1 照应式设计

PC端和移动端有着不同的屏幕分辨率，启动适配提升尤为关键。

驳回单列规划。手机屏幕上单列规划基本成果都不错。单列不只可以治理小屏幕上的有限空间，还可以轻松地在不同屏幕分辨率之间以及纵横比之间启动缩放。经常使用 Priority 导航形式。Priority 是Michael Scharnagl提出的，展现关键的导航选项， 不关键的导航选项汇合在“更多”按钮。它能充沛应用可用的屏幕空间。随着屏幕的参与，展现的导航选项也随之参与，从而可以提高可视性和吸引力。这种形式关于有很多不同的模块和页面的网站（如资讯网站或电商网站）特意有用。确保图像适宜PC端和移动端。网站肯定顺应一切不同的设备和分辨率，像素密度和方向。图像适配是构建照应式网站时面临的关键应战之一。为了简化这个义务，您可以经常使用诸如Responsive Image Breakpoints Generator这样的工具地处置图像。

Responsive Image Breakpoints Generator 可协助您生成及治理图像的不同尺寸。

3.2 手势操作

移动端的交互是经过手指成功的，而不是鼠标点击。

这象征着当您设计交互时要运行不同的规定。

交互元素的大小要适宜。一切的交互元素（如链接，按钮和菜单）应该都是可以手势操作的。PC端网站适宜交互区域（点击）较小且准确的方式，但移动网页须要较大的触发区，可以用拇指轻松成功。当网站经常须要用户操作时，请参考MIT Touch Lab的钻研为您的按钮选用适宜的尺寸。钻研发现，手指面的平均尺寸在10到14毫米之间，指尖在8到10毫米之间，10×10毫米是一个很好的尺寸。

按钮越大，点击越轻松。(Image credit: Apple)

交互须要更显著的视觉表白。PC端，用户将鼠标悬停在某个元素上（如显示下拉菜单）时，可以提供额外的视觉反应；移动端，没有悬停形态，移动用户将不得不点击以检查该照应。因此，应该确保用户能够正确预测界面元素代表的含意。四、不阻碍设计

产品肯定能够被任何人经常使用。

针对有生理毛病的用户启动设计是设计师去通常同理心和体验环球的一种方式。

4.1 弱视用户

许多网站的文本驳回低对比度形式。

只管低对比度或许比拟新潮的，但是难以识别。

低对比度关于视力低下和对比度敏感的用户不友好。

浅灰色背景上的灰色文字很难阅读。

体验会很不好，或许说设计的毫有意义。

低对比度文本在PC端很难阅读，在移动设备上变得愈加艰巨。

构想一下，你在明亮的阳光下行走时，须要在移动设备上阅读低对比度的文本。

这提示咱们，设计要确保信息能传递给用户。

永远不要为了好看就义可用性。

网站上的文本和其余关键元素的最关键的是可读（用）性。

可读性要求文本和背景之间有足够的对比。

为确保视觉阻碍人士能够阅读文本，W3C的网页内容不阻碍设计指南（WCAG）有一个对比度倡导]（对比）。

关于注释文本和图像文本，倡导经常使用以下对比度比率：

小字号的文本对比度至少要 4.5：1。最好的对比度是7：1。字号较大的文本（14号粗体、18号字体以上）应该至少有3：1的对比度。

不好：这些文本行不合乎对比度的倡导，难以阅读。

好：这些文本行遵照对比度的倡导，明晰可辨。

你可以经常使用WebAIM的色调对比度检测器]（）来确定能否处于最佳范围内。

4.2 色盲用户

据预计，环球人口中有4.5％出现色盲（12名男子中有1名，200名女性中有1名），4％患有低视（ 30人中有1名），0.6％是盲人（188人中有1人）。

咱们很容易遗记为这个用户群设计，由于大少数设计师都没有遇到这样的疑问。

为了让用户可以反常访问，请防止仅经常使用颜色来传达意义。

正如W3C申明，不应该经常使用颜色“作为惟一可视的传输方式 信息，批示执行，提示回应，或区分视觉元素。

“

表单中仅经常使用颜色表白提示信息是经常出现的方式。

成功和失误信息区分以绿色和白色显示。

但是白色盲和绿色盲是色盲个体中最多的。

大少数状况下，你能接纳到失误信息，比如“这段文字被标红”。

看起来没什么疑问，但是对色盲用户在这种方式下无法接纳到失误信息。

颜色应该是突出或补充曾经看得见的信息。

不好：这种方式仅仅依托白色和绿色来示意字段有没有失误。

色盲用户是无法识别的。

在下面的表格中，设计师应该给出更详细的说明，比如“您输入的电子邮件地址有效”或许在须要留意的中央显示图标。

好：图标和标签显示哪些字段有效，更好地将信息传递给色盲用户。

4.3 盲人用户

图片和插图是网页的关键组成局部。

但盲人须要屏幕阅读器等辅佐技术来翻译网站。

屏幕阅读器依托于图像的替代文原本“读取”图像。

假设该文本不存在或许形容不明晰，他们将无法依照预期失掉信息。

思索两个例子 – 第一，Threadless，一个盛行的T恤店。

这个页面并没有多少关于正在开售的商品的信息 。

惟一可用的文本信息是多少钱和大小的组合。

第二个例子来自ASOS。

雷同开售T恤的页面为该商品提供了准确的替代文字。

这有助于经常使用屏幕阅读器的人构想商品的外观。

为图像创立替代文本时，请遵照以下指南：

一切“有意义”的图像都须要形容性的替代文字。（“有意义”的照片指为高低文提供补充性信息）假设图像纯正是装璜性的，没有提供协助用户了解页面内容的有用信息，则不须要替代文本。

4.4 键盘适配

某些用户经常使用键盘而不是鼠标阅读网站。

例如，静止阻碍的人在经常使用鼠标这类精细的静止时有艰巨。

经过将交互式元素适配Tab键，并显示键盘批示符，使交互式和导航元素可以被这类用户轻松访问。

键盘导航的基本规定：

审核键盘批示符能否可见和显著。 一些网页设计师会删除键盘批示符，由于他们以为不好看。但这阻碍了键盘用户正确地与网站交互。假设您不青睐阅读器提供的自动批示符，请不要全删了它; 相反，设计它来满足你。一切的交互元素都应该可以经过键盘访问，而不只仅是关键的导航选项或关键的CTA。

您可以在W3C的“WAI-ARIA Authoring Practices”的文件中“设计形式和小工具”局部中找到无关键盘交互的详细要求。

五、测试

5.1 继续测试

测试是用户体验设计环节的关键组成局部。

和设计周期的其余局部一样，这是一个继续的环节。

在早期搜集信息开局，到整个环节都须要启动测试。

（Image credit: Extreme Uncertainty）

5.2 页面加载测试

用户厌恶加载慢的网站。

这就是为什么照应期间是网站的关键要素。

依据Nielsen Norman Group，有三个照应期间限度：

0.1秒对用户来说是即时的。1秒能保留用户的思维流利，但是会觉失掉细微的提前。10秒是用户坚持留意力集中在操作上的极限。10秒的提前通常会让用户立刻退出网站。

显然，咱们不应该让用户在网站下期待10秒钟。

但是经常出现几秒钟的提前，也会让人觉得不欢快。

用户将不得不期待操作成功。

通常是什么造成加载缓慢？

体量大的内容（如嵌入的视频和幻灯片小部件），后端代码未启动提升配件疑问（基础设备性能有限）。

像PageSpeed Insights]（）这样的工具可以协助您找出加载缓慢的要素。

5.3 A/B测试

当您在两个版本（如现有版本和从新设计版本的页面）之间启动选用时，A/B测试是理想的选用。

这种测试方法包括将两个版本中的一个随机显示给相反数量的用户，而后剖析哪个版本下用户更有效地成功了指标。

（Image credit: VWO）

六、 开发交接

UX设计流程]（）有两个关键的步骤 ：设计原型和开发。

设计成功并预备好进入开发阶段后，设计人员须要制订一份规范，该规范是形容设计应如何成功的文档。

规范确保开发不会偏离初衷。

规范中的准确性是至关关键的，由于在规范不准确的状况下，开发人员在开发时不得不依赖猜想，或许让设计人员解答他们的疑问。

但是人工编写规范是一个头痛的疑问，通常须要很长的期间。

借助Adobe XD的设计规范配置（测试版），设计人员可以为开发人员颁布一个地下的链接。

经过链接，开发人员可以审核，测量和复制样式。

设计师不再须要花期间编写规范来向开发者论述位置，文本样式或字体。

Adobe XD的设计规范配置（测试版）

七、论断

这里分享的技巧只是一个开局。

将这些想法与您自己的想法融合，能力到达最佳成果。

将您的网站视为一个不时开展的名目，并剖析用户反应来不时改良体验。

请记住，设计不只是为了设计师 – 而是为了用户。

smashingmagazine

译文地址：人人都是产品经理

译者：吉诺是比利

在新媒体流传环节中,用户体验表如今哪些方面

1. 界面设计与易用性：

直观性和繁复性： 新媒体平台的界面设计应当繁难直观，用户能够迅速了解和经常使用。

不繁琐的设计能够增加用户的认知累赘。

照应速度： 极速的照应速度是用户体验的关键组成局部。

页面加载速度快、操作反响迅速能够提高用户的满意度。

2. 内容品质和多样性：

丰盛的内容： 提供多样性和丰盛的内容，能够满足用户多元化的需求。

高品质的内容能够吸援用户的留意力，坚持用户的留存。

共性化介绍： 应用算法和用户数据，成功共性化内容介绍，经常使用户更容易找到合乎其兴味的信息，提高用户粘性。

3. 互动和社交体验：

社交配置： 提供社交化的配置，经常使用户能够与其余用户互动、分享信息，增强用户介入感和社交体验。

用户评论和反应： 准许用户宣布评论和提供反应，建设用户与平台之间的双向沟通，提高用户的介入感和忠实度。

4. 团体账户和数据安保：

账户治理： 提供完善的团体账户治理系统，经常使用户能够繁难地治理团体信息、偏好设置等。

数据隐衷包全： 严厉包全用户的隐衷，非法合规地处置用户数据，增强用户关于平台的信赖感。

5. 移动端适配和照应式设计：

跨平台适配： 保障在不同设备上都能够提供分歧的用户体验，包括PC端、移动端等。

照应式设计： 依据不同屏幕尺寸和设备特性，调整页面规划和显示成果，提高在不同设备上的可用性。

6. 共性化服务与定制体验：

共性化推送： 依据用户的历史行为和兴味，提供共性化的介绍服务，经常使用户感遭到定制的内容体验。

定制化设置： 准许用户依据自己的偏好启动共性化设置，提高用户关于平台的满意度。

7. 广告体验和营销战略：

非搅扰性广告： 驳回非搅扰性的广告方式，防止过多的广告对用户体验形成的搅扰。

共性化广告： 应用用户数据成功共性化广告投放，提高广告的关系性，参与用户对广告的接受度。

8. 技术翻新与体验更新：

引入新技术： 联合最新的技术趋向，如人工自动、虚构理想等，提供更有翻新性的体验。

不时更新： 活期更新平台，修复bug，引入新配置，坚持平台的生机和吸引力。

关于网页设计，你敢说你的照应式网站够低劣么

照应式网页曾经成为当下比拟干流的设计方式，仿佛每一团体都在议论，但实践上并不是每一团体都真的懂得。

以下总结了在启动照应式网页设计时的20个误区，你可以看看自身能否存在入其中所说的疑问。

1.照应式网页设计 = 移动端提升是的，当下确实移动互联网开展迅猛，所以照应式网页设计不时被当作重点，而且在概念上是主角。

但它也不是惟一，由于你还要思索到设备。

如：平板和电视。

照应式网页的真正目的是使网页顺应任何屏幕，恣意比例和宽度的互联网产品。

这些远远超出了手机的范围。

2.尽或许在多样的设备上测试在设计畛域，大少数设计师在设计他们的网站时，只会在大批的设备上测试，做照应式网站的时刻也一样。

要测试完一切设备是无法能的。

其实应该依据自己的用户启动有针对性的测试，这样操作性更强。

3.字体不用提升可怜的是，太多设计师觉得这点是对的。

他们器重在设备和网页上的大小，却不器重用户实践看到的大小，一个网站肯定有很强的可读性，而且照应式网站字体的思索是十分关键的。

4.一种适配阅历是不够用的人们宿愿可以接入不同的设备，这让设计师抓狂。

这也让设计师觉得网站肯定顺运行户的每个定制化的设备。

其实这个不难，你可以很容易让你的网站适配各个设备。

5. 照应式网页由于加载内容太多，所以慢人们在构想中时这样的，但是这不偏心，有很多小规范的网站内容巨多，但是加载迅速，顺利，标明这些疑问不是设计的疑问，错在页面加载速度，这是代码提升疑问。

6. 照应式网页不用让每个用例都可以用这是极端失误的，由于用例是照应式网页的重点。

设计者肯定思索到每一个用例，并且测试一切他们的设备。

你的用户会宿愿在任何时刻来经常使用你的网站。

7.照应式网页不适宜电商假的，只管电商网站内容多，但是照应式网页是很适宜批发业务的。

实践上，这曾经成为一种肯定，由Juniper Research公司启动的一项钻研标明，到2018年，一切的线上买卖中有30%会在移动设备上启动。

此外2014年开局移动购物者人数曾经从3.93亿开展到5.8亿，这可以说明照应式网页在电商方面的后劲。

8.照应式网页设计很费期间这个是或许的，确实要多花一些期间去思索照应式成果，但是也并不多。

其实，你只需创立了独特的适配代码库和内容基础。

而且越来越多的公司开发照应式框架，这使得咱们不须要花太多期间去做雷同的事件。

9.每团体和公司都须要“拥抱”照应式?不是每团体都看到了照应式网页设计的价值。

它象征着用最大的或许给用户提供信息，但是这也不是说一个公司要想成功就肯定把自己的网站做成照应式的。

由于这须要企业思索自己的投入产出比，公司依据状况去觉得能否须要它。

10.照应式网页须要支持一切的阅读器?担任照应式网页开发的部门将会继续提升网页，但是这并不象征着它要支持一切的手机阅读器。

它普通只用支持以下阅读器：Chrome,Firefox和Safari。

你将很难让其支持IE的旧版本。

这是蛮好的事件，由于用户开展不支持就会去更新自己的阅读器。

11.这个做起来太贵这是真的，成功照应式网页需啊哟不同的技艺、工具和技术。

但这也并不比那些致力的网页师贵多少。

其实，照应式网页会让你在主机老本上浪费点。

12.照应式网页会影响网站SEOSEO对照应式网页的支持十分好，很多搜查引擎发现你的网站没有针对手机提升，就降落你的网站排名。

由于这些搜查引擎宿愿提供的内容对用户更友好，所以你假设支持手机，他们肯定提高你的网站排名。

13.将现有网页内容转换成照应式很容易恰好相反，这须要用各种手腕让内容从大屏无缝切换到小屏。

适度环节中须要识别关键内容，去除多余的内容，并且等比缩放以顺应更小设备。

总之，要让这些内容在手机上显示得更好，而且繁难在设备间切换。

14.“移动第一”象征着移动端成果最关键，原版网站次要假设你首先思索移动，你会先思索用户，这将为用户带来更好的体验去经常使用手机版和原版，这个概念是说只是要给用户提供更好的体验，而不论他们访问的是啥内容。

15.一般设备断点照应式网页须要优先权照应式网页不是增加网站以顺应设备。

而是有更多的页面须要做，假设你想要开发一个担任人的网站，你须要了解各种用户界面，而不是仅仅做个接口上班。

这不只是对单个设备的断点，而是构建了一个框架，顺应各种状况。

16.经过一种提升图像来顺应一切屏幕由于你要把图片放到一个小的容器里，所以你显然要提升一下它们。

但是无法能做到一个图像顺应一切的设备，你须要提升他们。

设备尺寸大小差异太大，假设只是一张图片，像素太高就会加载很慢，像素太低酒会显示不明晰，所以你得有几种尺寸去顺应多种设备。

17.内容可以被暗藏在照应式里兴许这是理想，但前提是网页设计师不知道怎样办。

关于阅历丰盛的网页设计师来说这是荒唐的。

照应式网页时为了让内容更容易访问。

暗藏内容的想法是相反的，假设你辅佐配置的或许性大于暗藏内容，那还是选用提升的形式。

18.照应式网页设计是未来的趋向兴许这个“神话”起源于22%的营销人员，他们是照应式设计专家。

29%的人他们对照应式有肯定了解，23%的人他们只是基本了解，前面还有的齐全不知道照应式但如今照应式网页确实是干流，人们须要网页都能照应，5年后就很难说了，取得成功照应式设计离不放开常，并在通常中探求更流利的形式。

19.名目中照应式网页你肯定优先思索这个观念再次失误，平衡时关键，用户体验是关键，通常状况下，设计师要优先思索移动用户，但也并不总是如此，找到平衡点是你的责任。

20.照应式网页设计是个完美的模型但愿没有人置信这个“神话”。

阅历丰盛的设计师都明确，环球上不存在真正的完美模型，特意是在这样一个高速开展的时代。

加载期间慢总会被人埋怨，但是咱们曾经成功了跨多个设备的流利展现，60%的用户用移动设备接入互联网，所以照应式网页目前是一个最佳处置打算。

照应式网页设计不是一门正轨的迷信，而且很难解释清楚这个技术为什么能成功，但是这个技术却值得你把握，由于它能提高你和你公司的成功几率。