美學設計評價_死亡的孩子無法使用的設計美學

美學設計評價

In the popular anime series, Soul Eater, Death the Kid is a Shinigami (Japanese death god) who vanquishes evil with his dual pistols, Liz and Patty. Although he’s strikingly powerful, his battles are often hindered by his obsessive-compulsive need for symmetry; Kid is unable to hurt perfectly symmetrical enemies, unable to focus on a chase when passing beautiful symmetrical objects, and is paralyzed in disgust by the sight of extreme asymmetry.

在流行的動漫系列《噬魂師》中,“小孩子的死神”是Shinigami(日本死神),他用雙手槍Liz和Patty戰勝了邪惡。 盡管他非常強大,但他的戰斗常常因他對對稱性的強迫性需求而受阻。 Kid無法傷害完全對稱的敵人,無法通過漂亮的對稱物體時專注于追趕,并且由于極度不對稱而厭惡地癱瘓。

This obsessive-compulsive tendency actually exists in all of us. Something in our brain tells us “Symmetry is good and we must always strive for it!”

這種強迫癥傾向實際上存在于我們所有人中。 我們大腦中的某些事情告訴我們“對稱性很好,我們必須始終為此努力!”

Throughout my work as a UX designer, I see this over and over again. Without thinking about it, people around me (clients, PMs, developers, etc.) instinctually ask for it in my designs.

在我作為UX設計師的整個工作中,我一遍又一遍地看到這一點。 不用考慮,周圍的人(客戶,PM,開發人員等)本能地在我的設計中提出要求。

“Can you center align that paragraph?”

“您可以將該段居中對齊嗎?”

“Can you expand those input fields to fit the screen?”

“您可以擴展這些輸入字段以適合屏幕嗎?”

“Can you move this table header to the right to align with the section above?”

“您可以將此表格標題向右移動以與上面的部分對齊嗎?”

However, symmetry often makes a poor user experience because our brains expect to scan content in a side-aligned (left-aligned for English readers) manner, like reading a book.

但是,對稱通常會帶來糟糕的用戶體驗,因為我們的大腦希望以側對齊(對于英語閱讀者為左對齊)的方式掃描內容,例如看書。

中心對齊與左對齊 (Center alignment vs. left alignment)

Center aligned text is often more visually appealing, but it can make the content difficult to read if there is more than a sentence or two.

居中對齊的文本通常在視覺上更具吸引力,但是如果多于一兩個句子,則可能使內容難以閱讀。

an example of center aligned text versus an example of left aligned text
Left-aligned text reads more like a book, which creates a more natural and efficient experience.
左對齊的文本看起來更像一本書,從而創造了更加自然和高效的體驗。

As represented by the purple arrows above, a user’s vision tends to search for the start of the next line based on the previous starting point.

如上方的紫色箭頭所示,用戶的視線傾向于基于前一個起點來搜索下一行的起點。

In the center aligned example, the user needs to find and process the start point of the next line. This extra subconscious step not only adds to the cognitive workload, but also feels unnatural.

在居中對齊的示例中,用戶需要查找并處理下一行的起點。 這種額外的潛意識步驟不僅增加了認知工作量,而且感覺不自然。

對稱與F形 (Symmetry vs. F-shaped)

More often than not, forms and tables developed for corporate enterprise software tend to be immensely complicated and long. By default, many enterprise software platforms (ex. Salesforce or Pegasystems) treat these behemoth piles of data with symmetrical multi-column layouts that stretch across the page to “make use of the white space” and to “avoid too much vertical scrolling.”

通常,為公司企業軟件開發的表格和表格往往非常復雜且冗長。 默認情況下,許多企業軟件平臺(例如Salesforce或Pegasystems)使用對稱的多列布局處理這些龐然大物的數據,這些布局跨頁面延伸以“利用空白”并“避免過多的垂直滾動”。

An example of a default symmetrical multi columned form
Many software building platforms by default do not consider usability and reading patterns.
默認情況下,許多軟件構建平臺不考慮可用性和讀取模式。

There is an abundance of research that shows that single column forms are much more usable than multi-column ones mainly because:

有大量研究表明,單列表單比多列表單更有用,主要是因為:

  1. Multi-column layouts lack a clear sense of direction to lead users. This makes it harder to pick up momentum and adds to the cognitive load to determine the flow of information.

    多列布局缺乏明確的引導用戶的方向感。 這使得更難獲得動量,并增加了確定信息流的認知負擔。
  2. The lack of clear direction also causes users to skip fields.

    缺乏明確的方向還會導致用戶跳過字段。
  3. Users generally do not mind vertical scrolling.

    用戶通常不介意垂直滾動。
An example of a multi columned form versus an F shaped form
The form on the left has multiple directions for the user to read, thus adding an extra subconscious step to determine the directional flow, requiring more processing power. The form on the right clearly reads like a book (left-right, top-down) which makes the information quicker to process.
左側的表格有多個方向供用戶閱讀,因此增加了額外的下意識步驟來確定方向流,需要更多處理能力。 右側的表格清晰地讀起來像一本書(從左至右,從上至下),這使信息處理起來更快。

Stretching out forms and tables to fit the width of the screen is another common habit.

伸展表格和表格以適合屏幕寬度是另一個常見的習慣。

Another symmetrical and stretched out user interface

Although it aesthetically makes sense to add this symmetrical balance to pictures, it forces users to scan more real estate, which wastes time and, again, adds to the cognitive workload.

盡管在圖片上添加這種對稱的平衡在美學上是有意義的,但它迫使用戶掃描更多的不動產,這既浪費時間,又增加了認知工作量。

A more user-friendly design would be to size the input fields according to the amount of data expected (rather than keeping the same size for symmetry’s sake) and to follow the F-shaped reading pattern, which is more similar to reading a book (left-right, up-down).

一種更人性化的設計是根據預期的數據量來調整輸入字段的大小(而不是為了對稱而保持相同的大小),并遵循F形閱讀模式,這與閱讀書籍更相似(左右-上下)。

An example of an F shaped user interface

There are many advantages to laying out data this way:

通過這種方式布置數據有很多優點:

  1. It drives the user’s attention in a clear direction, making it faster and easier to scan.

    它可以沿清晰的方向吸引用戶的注意力,使其掃描更快,更容易。
  2. The extra white space makes the screen feel less cluttered.

    多余的白色空間使屏幕顯得更整潔。
  3. Since the data is closer in proximity, there is less distance to scan, which makes less work for the user.

    由于數據更接近,因此掃描距離更短,這對用戶減少了工作量。

強迫癥:強迫癥設計 (OCD: Obsessive-compulsive design)

By instinct, most people will continue to believe that symmetry feels more correct unless they are asked to actually do side-by-side usability comparisons. Despite successfully convincing clients to change their designs to be less symmetrical and more usable, I find that they have a hard time internalizing this logic.

出于本能,大多數人會繼續相信對稱性會更正確, 除非要求他們實際進行并行的可用性比較 。 盡管成功說服客戶將其設計更改為不太對稱且更易用,但我發現他們很難理解這種邏輯。

In conclusion, the obsession with symmetry is an overrated aesthetic that is harmful to both usability and Shinigamis.

總之,對對稱性的癡迷是一種高估的美學,對可用性和Shinigamis都有害。

Please don’t harvest my soul, Kid.

小子,請不要收獲我的靈魂。

翻譯自: https://uxdesign.cc/death-the-kids-unusable-design-aesthetic-260dcc81273e

美學設計評價

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275680.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275680.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275680.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

iis php網站500錯誤原因_因為曾經錯誤安裝過PHP5.2而導致IIS7無法正常工作,顯示500錯誤提示,大家幫忙看看!...

我的系統是VISTA,使用自帶的IIS7,對ASP網頁一直瀏覽正常。最近因自己心血來潮錯誤安裝了一次PHP5.2。主要操作是:1、下載的是自動安裝的PHP5.2程序,自動選ISAPI按鈕安裝;2、對IIS7中添加了名為“PHP”的ISAPI篩選器,選…

【送書】2021年哪些好書值得讀(小姐姐配音)

大家好,我是若川。記得點上面的小姐姐再次錄制的配音。為感謝大家一直以來的支持和肯定。不知道是今年第幾次送書了。昨天送書的音頻廣受好評,沒參與的可以參與。今天聯合華章圖書再送文中任選一本 * 3 包郵送,詳細規則看文末。Web開發01《斯…

Flash獲取html參數的方法

一. swf?傳參 html代碼:代碼<html><head><meta http-equiv”Content-Type” content”text/html charsetutf-8″ /><title>as</title></head><body><object classid”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase”h…

方法重載_方法

方法重載Recently, I wrote an article about moving XD designs to Figma. It was a really interesting experiment and one that seemed to interest quite a lot of people.最近&#xff0c;我寫了一篇有關將XD設計移至Figma的文章。 這是一個非常有趣的實驗&#xff0c;似…

php strtoup,PHP 7 的幾處函數安全小變化

To Begin With最近在準備 LANCTF&#xff0c;想把環境遷移到 PHP 7&#xff0c;卻想到一些 payload 失效了。想著什么時候總結成一個筆記&#xff0c;恰巧在 FB 發現有人寫了一篇博文&#xff0c;拜讀后結合 CTF 環境整理了一下&#xff0c;總體來說&#xff0c;棄用了較多不安…

Node.js 框架設計及企業 Node.js 基礎建設相關討論

大家好&#xff0c;我是若川。19年我寫的 lodash源碼 文章投稿到海鏡大神知乎專欄竟然通過了&#xff0c;后來20年海鏡大神還star了我的博客&#xff0c;同時還轉發了我的微博。時間真快啊。今天分享這篇Node.js的討論。2021 年上半年早已過去&#xff0c;回顧 Node.js 在國內的…

DAS、NAS、SAN、iSCSI 存儲方案概述

目前服務器所使用的專業存儲方案有DAS、NAS、SAN、iSCSI幾種。存儲根據服務器類型可以分為&#xff1a;封閉系統的存儲和開放系統的存儲&#xff1a; &#xff08;1&#xff09;封閉系統主要指大型機. &#xff08;2&#xff09;開放系統指基于包括Windows、UNIX、Linux等操作系…

同態加法_同態—當舊趨勢突然變酷時

同態加法Designers get excited at every year’s end to see what next year’s trend is going to be. What the future of design is going to look like. What they can carry forward to the next year; And Neumorphism was one among the lists which gained great atte…

網頁標題設置,為什么在SERP中,顯示結果不一致?

在網站建設與運營的過程中&#xff0c;我們經常會遇到各種各樣的問題&#xff0c;特別是關于網頁標題設置的問題&#xff0c;如果一個頁面標題出錯&#xff0c;那么&#xff0c;你整個頁面建設的過程&#xff0c;就完全是事倍功半&#xff0c;得不償失。 那么&#xff0c;網頁標…

阿里專有釘釘前端面試指南

大家好&#xff0c;我是若川。今天推薦這篇掘金高贊文章&#xff0c;歡迎留言交流。經作者子奕大佬授權轉載&#xff0c;原文鏈接&#xff1a;https://juejin.cn/post/6986436944913924103作者介紹子弈[1]&#xff0c;專有釘釘前端團隊成員&#xff0c;負責專有釘釘 PC 客戶端的…

安全態勢感知產品對比_設計中的對比和人的感知

安全態勢感知產品對比In this article, we’re going to explore the concept of contrast and its fundamental role in UX and visual design.在本文中&#xff0c;我們將探討對比度的概念及其在UX和視覺設計中的基本作用。 Let’s start by defining what contrast is.讓我…

在字節做前端一年后,有啥收獲~

大家好&#xff0c;我是若川。今天分享這篇&#xff0c;相信讀完會有些收獲。本文經作者授權轉載&#xff0c;原文鏈接&#xff1a;https://juejin.cn/post/6980671091526074404個人簡介19年底12月進入字節實習&#xff0c; 第二年7月畢業轉正。到前幾天正好全職一周年。進入公…

app用戶隱私協議相關法律_隱私圖標和法律設計

app用戶隱私協議相關法律During its 2020 Worldwide Developers Conference, Apple spent time on one of today’s hottest topics — privacy. During the past couple of years, Apple has been rolling out various public campaigns aiming to position itself as a compa…

HTTP referer

簡言之&#xff0c;HTTP Referer是header的一部分&#xff0c;當瀏覽器向web服務器發送請求的時候&#xff0c;一般會帶上Referer&#xff0c;告訴服務器我是從哪個頁面鏈接過來的&#xff0c;服務器籍此可以獲得一些信息用于處理。比如從我主頁上鏈接到一個朋友那里&#xff0…

ecshop模板支持php,[老楊原創]關于ECSHOP模板架設的服務器php版本過高報錯的解決方法集合...

1、admin/index.phpadmin/sms_url.php報錯&#xff1a;Strict Standards: mktime(): You should be using the time() function instead in /data/web/ledetaoadmin/sms_url.php on line 31$auth mktime();替換為&#xff1a;$auth time();報錯&#xff1a;Strict Standards:…

35 點擊全圖后發現地圖“不見了”

相信很多用ArcGIS軟件作圖的時候會習慣用全圖按鈕&#xff0c;但是有的時候工程文件是他人提供的&#xff0c;也不太清楚是怎么做的&#xff0c;一點全圖&#xff0c;軟件界面就一片空白&#xff0c;找數據找半天&#xff0c;很是苦惱啊 這雖然不是什么大問題&#xff0c;但還是…

成為優秀溝通者的要素_如果您想成為更好的設計師,請成為更好的溝通者

成為優秀溝通者的要素Little changes that go a long way.小變化大有幫助。 I started my career in motion design.我的職業生涯始于運動設計。 My focus was on the visual and technical skills required to make emotionally compelling work. I believed great design s…

我讀源碼的經歷~

你好&#xff0c;我是若川。最近來了一些讀者朋友&#xff0c;在這里簡單介紹自己的經歷&#xff0c;也許對你有些啟發。可以點擊 ruochuan12 加我微信進群交流。這是我的公眾號卡片&#xff0c;可以加下星標。我是誰我是若川&#xff0c;畢業于江西高校&#xff0c;《面試官問…

DEDECMS 5.6整合Discuz_X1.5的方法

DEDECMS 5.6整合Discuz_X1.5的方法 聽朋友的建議&#xff0c;為了網站繼續發展&#xff0c;準備整合一個論壇。我準備將DEDECMS 5.6與Discuz_X1.5進行整合&#xff0c;我先是在網站查找了一些資料&#xff0c;可能是技術太菜&#xff0c;竟然沒有成功。經過幾個高手的指點現在終…

php建一個表按刪除就刪除,php怎樣刪除數據庫表_后端開發

php刪除數據庫表的要領&#xff1a;起首建立一個PHP示例文件&#xff1b;然后銜接mysql數據庫&#xff1b;末了經由過程“DROP TABLE runoob_tbl”語句刪除MySQL數據表即可。引薦&#xff1a;《PHP視頻教程》php MySQL 刪除數據表MySQL中刪除數據表是異常輕易操縱的&#xff0c…