网页设想分析指南》(三):网页设想看这篇文

  幸运农场彩金您能够在W3C的“WAI-ARIA Authoring Practices”的文件中“设想模式和小东西”部门中找到相环节盘交互的细致要求。

  采用单列结构。手机屏幕上单列结构根基结果都不错。单列不只能够办理小屏幕上的无限空间,还能够轻松地在分歧屏幕分辩率之间以及纵横比之间进行缩放。

  10秒是用户连结留意力集中在操作上的极限。10秒的延迟凡是会让用户当即分开网站。

  图片和插图是网页的主要构成部门。但瞽者必要屏幕阅读器等辅助手艺来翻译网站。屏幕阅读器依托于图像的替换文原来“读取”图像。若是该文本不具有或者形容不清楚,他们将无奈依照预期获打消息。

  欠好:这种情势仅仅依托赤色和绿色来暗示字段有没有错误。色盲用户是无奈识此外。

  用户厌恶加载慢的网站。这就是为什么相合时间是网站的主要要素。按照Nielsen Norman Group,有三个相合时间制约:

  借助Adobe XD的设想规范功效(测试版),设想职员可认为开辟职员公布一个公然的链接。通过链接,开辟职员能够查抄,丈量和复制样式。设想师不再必要花时间编写规范来向开辟者论述位置,文本样式或字体。

  思量两个例子 第一,Threadless,一个风行的T恤店。这个页面并没有几多关于正在发卖的商品的消息 。独一可用的文本消息是价钱和巨细的组合。

  查抄键盘指示符能否可见和较着。 一些网页设想师会删除键盘指示符,由于他们以为不美妙。但这障碍了键盘用户准确地与网站交互。若是您不喜好浏览器供给的默认指示符,请不要全删了它; 相反,设想它来餍足你。

  为了让用户能够一般拜候,请避免仅利用颜色来转达意思。 正如W3C声明,不应当利用颜色“作为独一可视的传输体例 消息,指示步履,提醒回应,或区分视觉元素。“

  交互元素的巨细要符合。所有的交互元素(如链接,按钮和菜单)该当都是能够手势操作的。PC端网站适合交互区域(点击)较小且切确的体例,但挪动网页必要较大的触发区,能够用拇指轻松完成。当网站经常必要用户操作时,请参考MIT Touch Lab的钻研为您的按钮取舍符合的尺寸。钻研发觉,手指面的均匀尺寸在10到14毫米之间,指尖在8到10毫米之间,10×10毫米是一个很好的尺寸。

  现在,网站用户中有50%摆布的用户通过挪动设施拜候。这对网页设想师象征着什么?象征着咱们必需为网站进行挪动端适配设想。

  设想师和开辟职员在建立网站时,必要思量良多工作,从视觉外观到功效设想。为了简化这个历程,咱们预备了这个指南。限于篇幅制约,将这一指南分为三部门,此为第三部门内容。

  所有的交互元素都该当能够通过键盘拜候,而不只仅是次要的导航选项或次要的CTA。

  第二个例子来自ASOS。同样发卖T恤的页面为该商品供给了精确的替换文字。 这有助于利用屏幕阅读器的人想象商品的外观。

  确保图像适合PC端和挪动端。网站必需顺应所有分歧的设施和分辩率,像素密度和标的目的。图像适配是建立相应式网站时面对的次要应战之一。为了简化这个使命,您能够利用诸如Responsive Image Breakpoints Generator如许的东西地处置图像。

  你能够利用WebAIM的[色彩比拟度检测器](来确定能否处于最佳范畴内。

  [UX设想流程](有两个主要的步调 :设想原型和开辟。设想完成并预备好进入开辟阶段后,设想职员必要制订一份规范,该规范是形容设想应若何实现的文档。规范确保开辟不会偏离初志。

  明显,咱们不应当让用户在网站上期待10秒钟。可是经常产生几秒钟的延迟,也会让人感受不高兴。用户将不得不期待操作完成。

  低比拟度文本在PC端很难阅读,在挪动设施上变得愈加坚苦。想象一下,你在敞亮的阳光下行走时,必要在挪动设施上阅读低比拟度的文本。这提示咱们,设想要确保消息能传送给用户。

  永久不要为了美妙捐躯可用性。网站上的文本和其他主要元素的最主要的是可读(用)性。可读性要求文本和布景之间有足够的比拟。为确保视觉妨碍人士可以大概阅读文本,W3C的网页内容无妨碍设想指南(WCAG)有一个[比拟度提议](比拟contrast.html)。对付注释文本和图像文本,提议利用以下比拟度比率:

  很多网站的文本采用低比拟度模式。尽管低比拟度可能比力新潮的,可是难以识别。低比拟度对付目力低下和比拟度敏感的用户不敌对。

  交互必要更较着的视觉表达。PC端,用户将鼠标悬停在某个元素上(如显示下拉菜单)时,能够供给分外的视觉反馈;挪动端,没有悬停形态,挪动用户将不得不点击以查看该相应。因而,该当确保用户可以大概准确预测界面元素代表的寄义。

  挪动真个交互是通过手指完成的,而不是鼠标点击。这象征着当您设想交互时要使用分歧的法则。

  这里分享的技巧只是一个起头。将这些设法与您本人的设法融合,才能到达最佳结果。将您的网站视为一个不竭成长的项目,并阐发用户反馈来不竭改良体验。请记住,设想不仅是为了设想师 而是为了用户。

  利用 Priority+ 导航模式。Priority+是Michael Scharnagl提出的,展现主要的导航选项, 不主要的导航选项调集在“更多”按钮。它能充实操纵可用的屏幕空间。跟着屏幕的添加,展现的导航选项也随之添加,从而能够提高可视性和吸引力。这种模式对付有良多分歧的模块和页面的网站(如旧事网站或电商网站)出格有用。

  表单中仅利用颜色表达提醒消息是常见的体例。顺利和错误动静别离以绿色和赤色显示。可是赤色盲和绿色盲是色盲群体中最多的。大大都环境下,你能领受到错误消息,好比“这段文字被标红”。看起来没什么问题,可是对色盲用户在这种情势下无奈领受到错误消息。颜色该当是凸起或弥补曾经看得见的消息。

  产物必需可以大概被任何人利用。针对有心理缺陷的用户进行设想是设想师去实践同理心和体验世界的一种体例。

  若是图像纯粹是粉饰性的,没有供给协助用户理解页面内容的有用消息,则不必要取代文本。

  某些用户利用键盘而不是鼠标浏览网站。比方,活动妨碍的人在利用鼠标这类精细的活动时有坚苦。通过将交互式元素适配Tab键,并显示键盘指示符,使交互式和导航元素能够被这类用户轻松拜候。

  据估量,环球生齿中有4.5%呈现色盲(12名男性中有1名,200名女性中有1名),4%患有低视( 30人中有1名),0.6%是瞽者(188人中有1人)。咱们很容易健忘为这个用户群设想,由于大大都设想师都没有碰到如许的问题。

  规范中的切确性是至关主要的,由于在规范不精确的环境下,开辟职员在开辟时不得不依赖推测,或者让设想职员解答他们的问题。可是人工编写规范是一个头痛的问题,凡是必要很长的时间。

  当您在两个版本(如现有版本和从头设想版本的页面)之间进行取舍时,A/B测试是抱负的取舍。这种测试方式包罗将两个版本中的一个随机显示给不异数量的用户,然后阐发哪个版本下用户更无效地完成了方针。

  在上面的表格中,设想师该当给出更具体的申明,好比“您输入的电子邮件地点有效”或者在必要留意的处所显示图标。

  测试是用户体验设想历程的主要构成部门。和设想周期的其他部门一样,这是一个连续的历程。在晚期网络消息起头,到整个历程都必要进行测试。

  所有“成心义”的图像都必要形容性的替换文字。(“成心义”的照片指为上下文供给弥补性消息)