中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文筆者將從交互體驗(yàn)優(yōu)化方面著手，針對(duì)界面域劃分，以及交互引導(dǎo)兩方面，來講述：該如何基于用戶體驗(yàn)的易用性設(shè)計(jì)原則，優(yōu)化交互細(xì)節(jié)設(shè)計(jì)？

終于騰出空來繼續(xù)更新交互細(xì)節(jié)思考系列文章，最近做了一些項(xiàng)目，很多是體驗(yàn)優(yōu)化方向的交互設(shè)計(jì)。

在我們?nèi)粘５慕换スぷ髦?，往往?huì)遇到功能優(yōu)化迭代的需求。這部分工作，一部分來自于需求方的需求變更，功能的迭代等；另一部分來自于設(shè)計(jì)師的體驗(yàn)優(yōu)化，可能是解決用研同學(xué)調(diào)研發(fā)現(xiàn)的體驗(yàn)問題，還可能是設(shè)計(jì)師自己發(fā)起的體驗(yàn)優(yōu)化。這次準(zhǔn)備從交互體驗(yàn)優(yōu)化方面著手，介紹幾個(gè)工作中的案例，希望對(duì)讀者有所幫助。

區(qū)域劃分

主要為閱讀區(qū)域和操作區(qū)域兩部分的結(jié)構(gòu)劃分。對(duì)整體體驗(yàn)而言，視覺閱讀區(qū)域和操作區(qū)域的劃分，顯得非常重要。

用戶的交互行為，可形象的形容為用戶為完成某件事與終端進(jìn)行的互動(dòng)行為。其中，對(duì)用戶的行為影響最大的是信息閱讀。

1. 閱讀區(qū)域

閱讀區(qū)域，主要包括：文字、圖片、視頻、音頻等，以傳遞信息為載體的展示區(qū)域。

為了優(yōu)化信息展示，使信息的排布方式更加符合人眼的閱讀順序，高效閱讀，設(shè)計(jì)師做了很多工作，譬如：制定規(guī)范時(shí)，特意區(qū)分title和正文等的字體大小；根據(jù)信息的父子關(guān)系和鄰里關(guān)系，對(duì)其定義不同間距大?。恍畔⒄故镜捻樞蛳茸蠛笥?、先上后下等等。

做這些工作的最終目的，是讓用戶通過高效的信息讀取，快速獲取信息，從而做正確的操作行為，完成目標(biāo)。

2. 操作區(qū)域

操作區(qū)域，主要包括按鈕、表單等，集成了絕大部分的人機(jī)互動(dòng)行為的區(qū)域?？赡苌婕暗近c(diǎn)擊、滑動(dòng)、長按等操作動(dòng)作。

PC的操作區(qū)域，基于鍵鼠的精確操作和右手原則，我們通常將閱讀區(qū)域與操作區(qū)域設(shè)計(jì)為左右結(jié)構(gòu)或上下結(jié)構(gòu)，按鈕的位置放置在右下側(cè)。有關(guān)交互動(dòng)作方面，只需要涉及鼠標(biāo)單擊、雙擊、懸停、右擊和鍵盤的動(dòng)作響應(yīng)即可。

但移動(dòng)端的操作區(qū)域的交互設(shè)計(jì)卻不經(jīng)相同，主要區(qū)別有以下幾種：

1. 顯示屏幕相對(duì)較小：單個(gè)頁面內(nèi)容有限，單個(gè)頁面只做一件事為宜。
2. 操作熱區(qū)變大：從鼠標(biāo)操作變?yōu)槭植坑|屏操作致使熱區(qū)變大，需要考慮手指最小點(diǎn)擊面積、滑動(dòng)操作幅度大小等。
3. 操作不同：PC端的交互為鍵鼠操作，頁面設(shè)計(jì)只考慮鼠標(biāo)的單擊、雙擊、懸停、右擊和鍵盤快捷操作；但在移動(dòng)端上，用戶可以通過一只或者多只手指點(diǎn)擊、拖動(dòng)、滑動(dòng)、橫掃、雙擊、放大、縮小、長按、搖晃等操作去把玩設(shè)備，且要考慮虛擬鍵盤。

對(duì)于區(qū)域劃分，通常我們?cè)O(shè)計(jì)的頁面并沒有那么簡單，僅有一個(gè)閱讀區(qū)域和一個(gè)操作區(qū)域的，這個(gè)時(shí)候就需要交互設(shè)計(jì)師對(duì)信息進(jìn)行整合，通過交互方式將用戶的整個(gè)閱讀和操作流程理順。

前幾天做了一個(gè)這方面的需求。需求是這樣的，蘇寧小店線上購買商品分為配送和自提兩種收貨方式。

我做的核驗(yàn)該功能的使用場景是：給小店店員核驗(yàn)線上自提訂單時(shí)使用的。店員通過核驗(yàn)功能對(duì)顧客的自提訂單和包裹進(jìn)行核驗(yàn)，核驗(yàn)可以多次操作，如果商品有破損或不滿意的情況可以操作退款。

核驗(yàn)信息包括：訂單流水號(hào)、訂單信息、顧客信息、備注信息、商品信息和優(yōu)惠信息等，操作包括選商品、核驗(yàn)或退款。

剛開始經(jīng)過與產(chǎn)品經(jīng)理溝通的原型圖如下：

可以看到整個(gè)頁面的邏輯是符合用戶在核驗(yàn)自提單時(shí)的使用場景的。顧客在取貨時(shí)，店員首先會(huì)根據(jù)訂單物流號(hào)和訂單號(hào)等找到相應(yīng)的訂單，核對(duì)顧客信息，查看備注。然后，去查看哪些商品可以核驗(yàn)，哪些商品需要退款，并進(jìn)行對(duì)應(yīng)的操作。

但仔細(xì)研究發(fā)現(xiàn)：配送費(fèi)和優(yōu)惠信息，直接放在商品下面，促使信息太過冗余，阻礙了操作連貫性，需要重新處理這部分信息。

經(jīng)調(diào)研分析：配送費(fèi)和優(yōu)惠信息只有在顧客價(jià)格核對(duì)有出入時(shí)，才做核對(duì)，正常核驗(yàn)流程店員并不關(guān)注，故可對(duì)其收起。

設(shè)計(jì)如下：

如此，上半部分是核驗(yàn)信息閱讀區(qū)域，下半部分是勾選商品、核驗(yàn)或退款的操作區(qū)域，整個(gè)頁面就清晰了。

交互引導(dǎo)

基于用戶體驗(yàn)的易用性設(shè)計(jì)原則，交互設(shè)計(jì)需：

1.操作前，結(jié)果可預(yù)知；
2.操作時(shí)，操作有反饋；
3.操作后，操作可撤銷。

因此，在工作中我們必不可少的需要對(duì)用戶的交互操作進(jìn)行引導(dǎo)，讓用戶會(huì)用不同類型的交互使用方式。

如：卡片或TAB展示通常會(huì)展示3.5個(gè)、4.5個(gè)等多露出半個(gè)，告訴用戶還有更多的卡片或TAB通過滑動(dòng)查看。

對(duì)于交互引導(dǎo)也可分為：操作前式、操作中式和操作后式。

1）操作前式交互引導(dǎo)，通常設(shè)計(jì)在操作前的提醒，提前提醒用戶操作的結(jié)果或引導(dǎo)用戶在哪找到非顯性的交互，如引導(dǎo)頁、功能引導(dǎo)、提醒暗語等；

2）操作中式交互引導(dǎo)，則是在用戶操作時(shí)增加的步驟引導(dǎo)，如分步式表單填寫、操作反饋彈窗或toast等，提醒用戶當(dāng)前進(jìn)度和剩余進(jìn)度，給用戶心理預(yù)期，如下圖。

3）操作后式引導(dǎo)，多為需要用戶確認(rèn)信息的確認(rèn)提醒，如二次確認(rèn)等。

操作中與操作后式引導(dǎo)，相信大多數(shù)交互設(shè)計(jì)師在日常工作中會(huì)經(jīng)常用到，操作前式引導(dǎo)常被我們忽略，以下重點(diǎn)聊一下這種交互引導(dǎo)。

無論是移動(dòng)端還是PC端，在固定大小的頁面上做不同的交互設(shè)計(jì)時(shí)，我們或多或少遇到在有限的頁面展示不全預(yù)定的所有信息。

這時(shí)，我們會(huì)用到隱藏式交互展示方式（如：手風(fēng)琴、彈窗、下拉等）。這些交互形式往往會(huì)因其相對(duì)隱蔽，不能很好地被用戶熟知。因此，針對(duì)這些交互形式的交互引導(dǎo)往往是必要的。有隱藏式交互時(shí)，需要增加對(duì)應(yīng)標(biāo)識(shí)，告訴用戶這個(gè)地方通過點(diǎn)擊還有內(nèi)容展示。

最近做的一個(gè)項(xiàng)目有遇到需要做一種類似微信小程序改版前入口的下拉式展示。

該功能是放在一個(gè)門店店員開單軟件流程的首頁。因?yàn)榈陠T所在門店的銷售商品的屬性不同，該開單工具集合了幾種不同類型的開單流程，且配置了不同的常用功能快捷方式。

因此，需要有一個(gè)區(qū)域放置這些功能入口，經(jīng)過對(duì)一系列影響因素的評(píng)估，最合適的交互展示是使用類似于微信小程序式下拉展開部分區(qū)域。

但運(yùn)用這種交互形式需要注意，下拉操作會(huì)與手動(dòng)刷新頁面的交互重疊，需要對(duì)刷新重新定義。經(jīng)過對(duì)產(chǎn)品的評(píng)估，以及與開發(fā)人員的溝通。該區(qū)域的刷新方式可改為每次打開軟件自動(dòng)更新，取消手動(dòng)刷新，上滑每10件商品加載分頁的方式來解決。

在設(shè)計(jì)之初，我們預(yù)估到這種交互形式相對(duì)較隱蔽，店員可能找不到。故對(duì)該功能設(shè)計(jì)了對(duì)應(yīng)的功能引導(dǎo)，在版本更新之初詳細(xì)引導(dǎo)，引導(dǎo)如下圖：

針對(duì)該操作，在功能上線一個(gè)月內(nèi)，我們不斷對(duì)不同業(yè)務(wù)需求的店員進(jìn)行了階段性的調(diào)研。調(diào)研結(jié)果顯示，店員對(duì)該功能的使用情況并不理想，甚至于超出我們的預(yù)估。

基于以上情況，在我們對(duì)該交互形式做了操作前式交互引導(dǎo)。

首先在每一次打開軟件時(shí)將下拉入口默認(rèn)展開，用戶需要手動(dòng)拉起隱藏。通過“下拉試試”引導(dǎo)用戶在之后的操作，手動(dòng)下拉，實(shí)時(shí)引導(dǎo)用戶這里有隱藏功能，忘記在哪沒關(guān)系，請(qǐng)下拉使用。

通過不斷強(qiáng)化用戶的記憶，培養(yǎng)店員的使用習(xí)慣。

考慮到移動(dòng)端屏幕顯示區(qū)域有限，增加引導(dǎo)（下拉試試）面積導(dǎo)致下面的商品列表顯示區(qū)域縮短，會(huì)影響單屏展示；同時(shí)我們的用戶類型相對(duì)穩(wěn)定，故當(dāng)用戶使用習(xí)慣培養(yǎng)出來后，這里的交互引導(dǎo)便可去掉。交互稿如下圖：

交互設(shè)計(jì)，不僅要有整體邏輯能力，更要有對(duì)交互細(xì)節(jié)的推敲。以上是最近的一部分思考和交互細(xì)節(jié)推敲，全當(dāng)拋磚引玉。第一期的讀者反饋不錯(cuò)，我會(huì)堅(jiān)持更新嗒。

本文由@交互小帥 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議