自行車網(wǎng)站建設(shè)如何改善網(wǎng)站用戶體驗(yàn)

流行智慧的粉絲經(jīng)常斷言，?整個(gè)西方文化中只有兩個(gè)截然不同的情節(jié)：一個(gè)人旅行，一個(gè)陌生人來到鎮(zhèn)上。

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

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

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

?

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

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

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

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

?

在微交互中使用劇透

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

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

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

縮圖

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

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

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

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

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

5分鐘閱讀

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

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

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

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

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

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

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

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

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

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

地圖和保證

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

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

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

Thriva可通過在家進(jìn)行的血液檢查幫助您跟蹤健康狀況。他們?cè)诓藛沃星宄卣f明了三個(gè)級(jí)別的產(chǎn)品。

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

?

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

講故事是有效設(shè)計(jì)的對(duì)立面，因?yàn)楣适碌谋举|(zhì)會(huì)順應(yīng)體驗(yàn)中的未知元素。相反，設(shè)計(jì)試圖通過澄清來消除未知。

高端網(wǎng)站設(shè)計(jì)設(shè)計(jì)中提出數(shù)據(jù)時(shí)，通常會(huì)以一種簡單的方式進(jìn)行。一條精選的數(shù)據(jù)可以闡明整個(gè)過程。微交互是插入這些“破壞者”的理想方法，它使用戶能夠創(chuàng)建自己的體驗(yàn)，同時(shí)始終準(zhǔn)確地知道他們?cè)诟鼜V泛的上下文中的位置。

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