網(wǎng)站設(shè)計如何破壞結(jié)局如何改善用戶體驗

流行智慧的粉絲經(jīng)常斷言， 整個西方文化中網(wǎng)站設(shè)計制作：一個人旅行，一個陌生人來到鎮(zhèn)上。

短暫瀏覽一下書架將反駁規(guī)則-除非您允許進行適合所有情況的隱喻之旅，但重復(fù)提出該想法的頻率以及它似乎產(chǎn)生的含義充分說明了西方未知事物的中心地位敘事觀念。

在這兩種情節(jié)中，一個人都被介紹給了新的和意想不到的東西，唯一的變化是敘事說話的觀點。在兩種情況下，故事都是未知的，成為已知的。當克林特·伊斯特伍德（Clint Eastwood）于1800年代愛達荷州（Edaho）進入一個破敗的小鎮(zhèn)時，我們對他的身份的好奇心驅(qū)使我們參與其中。當我們閱讀托爾金的《指環(huán)王》三部曲時，我們毫不懷疑弗羅多最終將成為《毀滅戰(zhàn)士》，這就是沿途發(fā)生的事情。

講故事的關(guān)鍵是存在一個未知數(shù)，并且未知數(shù)將成為已知的。

設(shè)計師不是講故事的人

許多設(shè)計師都將自己稱為講故事的人，但這只是一種溝通的愚蠢方式。要講一個故事，我們必須養(yǎng)成未知數(shù)，以準備進行大膽的揭露，而這種方法的主要障礙是，Web體驗（我認為大多數(shù)與設(shè)計的接觸）是非線性且開放的。

設(shè)計實際上更接近于詩歌。詩歌通常以一口大小的形式存在，并在其中探索可以解釋的主題。

設(shè)計師的工作不是構(gòu)建故事，而是盡可能不打擾地進行澄清。

在微交互中使用劇透

Jaws中最吸引人的元素是什么？布羅迪在和市長爭論嗎？是Quint在講印第安納波利斯的故事嗎？是胡珀與艾倫·布羅迪（Ellen Brody）的戀情嗎（是的，真的是讀這本書！）？不，這是音樂。一旦鯊魚開始演奏大提琴，我們就知道它的來臨，字面意思是它的到來。[順便說一下，《大白鯊》是電影中一個有趣的例子，其中一個陌生人（鯊魚）來到小鎮(zhèn)，然后一個人去旅途（出海）。]

我們可以不斷扔下擾流板，用自己的大提琴音樂暗示即將發(fā)生的事情，從而參與設(shè)計。為此，我們使用微交互功能-簡單的UI組件，具有觸發(fā)和反饋功能。微交互的反饋部分是插入擾流板的地方。

它通過預(yù)覽將在以后的線性體驗中引入的數(shù)據(jù)來工作。關(guān)鍵是將數(shù)據(jù)轉(zhuǎn)發(fā)出去。

縮圖

讓我們從熟悉的地方開始：推動信息前進的經(jīng)典示例是縮略圖。縮略圖是較大元素的預(yù)覽，它是鏈接另一端的視覺指南。

杰基·溫特（ Jacky Winter）是針對藝術(shù)家，插畫家和動畫師的人才代理機構(gòu)。擁有各種各樣的才能，瀏覽工作的最佳方法是使用傳統(tǒng)縮略圖。

縮略圖不必是傳統(tǒng)的。Alexandre Nacache是一位藝術(shù)總監(jiān)和互動設(shè)計師，其網(wǎng)站使用項目元素的預(yù)覽，而不是微型設(shè)計的復(fù)制品。

Bao是一家臺灣餐廳，在倫敦設(shè)有三個地點。他們的位置插圖就像縮略圖一樣，不僅暗示著餐廳的外觀，而且還暗示了一種可能的體驗。

A Day Out是一家位于格拉斯哥的設(shè)計工作室。他們網(wǎng)站上的縮略圖構(gòu)成了藝術(shù)指導(dǎo)的主要組成部分，并確立了自己的品牌美感。

5分鐘閱讀

回顧過去，了解這樣的文章需要花費多長時間的唯一方法是檢查時間，閱讀文章并再次檢查時間。

基于它的使用，近年來最成功的UI元素之一是有用的小指示器，它告訴我們閱讀一篇文章需要多長時間。在諸如Medium之類的網(wǎng)站中流行，沒有涉及眼動跟蹤或計算閱讀速度的情況，“ 5分鐘閱讀時間”估算值是基于字數(shù)統(tǒng)計的，預(yù)計在30秒  左右的時間內(nèi)可以讀取 125個字。但是，即使是這些粗略的概括數(shù)據(jù)也足以使用戶做出有關(guān)其對網(wǎng)站，商品或產(chǎn)品的承諾的明智決定。

澳大利亞設(shè)計電臺的單調(diào)僅被用于懸停狀態(tài)的對比紅色打破。唯一使用紅色而不交互的元素？具有位置和總長度的播放頭。

紅杉是位于加利福尼亞的風(fēng)險投資公司。科技公司的個人資料占據(jù)其登錄頁面。每個配置文件都有一個編號的位置，滑塊的動畫計時器將您的注意力吸引到過程中的確切位置。

Vimeo擁有一些網(wǎng)絡(luò)上最好的視頻。將鼠標懸停在縮略圖上時，他們可能會顯示任何想要的信息（制作人，主題，標題）。他們選擇了持續(xù)時間。

Cinelli是意大利最酷的自行車品牌。他們的產(chǎn)品滑塊具有編號的“下一個”和“上一個”按鈕。僅箭頭就足以傳達含義，但設(shè)計人員只需在按鈕上添加一個簡單的按鈕即可將數(shù)據(jù)向前傳送。

合格數(shù)據(jù)

增強接口的最簡單方法之一是使用有意義的上下文限定數(shù)據(jù)。這樣做的關(guān)鍵不是傳遞太多的信息，而只是一個簡單的摘要，可以一目了然地閱讀。

幫助Scout是客戶服務(wù)SaaS。他們的儀表板顯示關(guān)鍵指標（例如總對話），如果不添加箭頭和百分比（表示是改善還是挫折），這將毫無意義。

當Trainline在旅途時間下方顯示一個欄，以直觀方式指示持續(xù)時間和更改次數(shù)時，從里昂到波爾多的車票預(yù)訂會變得更加簡單。

地圖和保證

當我們預(yù)期旅程，尤其是通往未知世界的旅程時，我們通常會用地圖來揭開這個體驗的神秘面紗。在現(xiàn)實世界中，地圖非常類似于目的地的縮略圖。在用戶界面設(shè)計中，我們使用的地圖闡明了信息體系結(jié)構(gòu)。

標簽是信息體系結(jié)構(gòu)中最復(fù)雜的領(lǐng)域之一，因為它們傾向于行話，通常是公司專有的行話。添加無術(shù)語的顯微鏡可以預(yù)覽用戶的目的地，并幫助他們找到正確的信息。

萊迪思是一種績效管理SaaS，但其產(chǎn)品以公司為中心。他們通過在菜單中注明每種產(chǎn)品的關(guān)鍵功能來解決此問題。

Thriva可通過在家進行的血液檢查幫助您跟蹤健康狀況。他們在菜單中清楚地說明了三個級別的產(chǎn)品。

金融交易在技術(shù)上很復(fù)雜。網(wǎng)站設(shè)計制作為開發(fā)人員提供了多種API產(chǎn)品。他們的菜單不僅說明了每種產(chǎn)品的關(guān)鍵功能，而且還根據(jù)產(chǎn)品組合預(yù)覽了兩種潛在的解決方案。

有效的UI設(shè)計的關(guān)鍵是破壞者

講故事是有效設(shè)計的對立面，因為故事的本質(zhì)會順應(yīng)體驗中的未知元素。相反，設(shè)計試圖通過澄清來消除未知。

當我們在設(shè)計中提出數(shù)據(jù)時，通常會以一種簡單的方式進行。一條精選的數(shù)據(jù)可以闡明整個過程。微交互是插入這些“破壞者”的理想方法，它使用戶能夠創(chuàng)建自己的體驗，同時始終準確地知道他們在更廣泛的上下文中的位置。

 通過揭示比線性故事更多的內(nèi)容，我們可以更有效地吸引用戶，并設(shè)計出健壯且易于使用的體驗。