2023年B端設(shè)計(jì)師如何做好還原度走查_(kāi)第1頁(yè)
2023年B端設(shè)計(jì)師如何做好還原度走查_(kāi)第2頁(yè)
2023年B端設(shè)計(jì)師如何做好還原度走查_(kāi)第3頁(yè)
2023年B端設(shè)計(jì)師如何做好還原度走查_(kāi)第4頁(yè)
2023年B端設(shè)計(jì)師如何做好還原度走查_(kāi)第5頁(yè)
已閱讀5頁(yè),還剩14頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

B端設(shè)計(jì)師,如何做好還原度走查寫在前面

作為設(shè)計(jì)師,你肯定遇到過(guò)這樣的狀況,自己做的設(shè)計(jì)稿,被開(kāi)發(fā)出來(lái)后卻完全換了一個(gè)模樣。不僅視覺(jué)上有問(wèn)題,交互上也有錯(cuò)誤。而要想避開(kāi)這樣的狀況,我們就肯定要重視還原度走查這個(gè)階段。

它是我們產(chǎn)品上線前的必要保障。雖然測(cè)試同學(xué)會(huì)關(guān)心我們驗(yàn)證一些流程上的問(wèn)題,但更多的還原度細(xì)節(jié)問(wèn)題,比如交互和字號(hào)間距等,則更多依靠我們?cè)O(shè)計(jì)師的來(lái)檢查。而在還原度走查的過(guò)程中,個(gè)人認(rèn)為主要分為以下幾個(gè)部分:

一、還原度何時(shí)開(kāi)頭

經(jīng)過(guò)對(duì)比驗(yàn)證,發(fā)覺(jué)還原度在測(cè)試進(jìn)行第一輪測(cè)試后進(jìn)行,效率和時(shí)間能夠最大化。

緣由如下:

第一輪沒(méi)結(jié)束前,許多功能性bug會(huì)存在,假如介入過(guò)早,很難跑完全部流程,加大還原度介入難度。一些明顯的交互和視覺(jué)問(wèn)題,測(cè)試團(tuán)隊(duì)在第一輪是能夠發(fā)覺(jué)的,也能削減一部分工作量;假如等bug解決得差不多,可能都二輪后了,這時(shí)候才開(kāi)頭走查的話,那么留給設(shè)計(jì)師的時(shí)間就會(huì)特別少,由于結(jié)測(cè)的時(shí)間已經(jīng)固定,這可能導(dǎo)致開(kāi)發(fā)可能沒(méi)有足夠的時(shí)間修正問(wèn)題。

二、還原度檢查內(nèi)容

當(dāng)我們拿到開(kāi)發(fā)提測(cè)的版本后,應(yīng)當(dāng)針對(duì)于哪些內(nèi)容進(jìn)行檢測(cè)呢。本人認(rèn)為可以整體檢查可以分為以下3個(gè)部分:

2.1整體流程

當(dāng)我們拿到產(chǎn)品后,第一時(shí)間可以看下我們的整體的流程是否有遺漏,整體流程是否能夠跑通。

首先需要確保我們的產(chǎn)品沒(méi)有大的流程問(wèn)題后,這個(gè)時(shí)候就可以開(kāi)頭細(xì)節(jié)的部分。避開(kāi)某些大的流程被忽視,這往往需要更多的開(kāi)發(fā)量,越早提出來(lái)開(kāi)發(fā)就越早介入修改。

雖然這個(gè)過(guò)程基本都會(huì)被測(cè)試團(tuán)隊(duì)在第一輪的時(shí)候查驗(yàn)出來(lái),但為了避開(kāi)有遺漏,我們最好還是先把全流程跑一遍以避開(kāi)發(fā)生問(wèn)題。

2.2交互內(nèi)容

當(dāng)流程跑完,這個(gè)時(shí)候我們就可以進(jìn)入到交互細(xì)節(jié)的檢查。一般來(lái)說(shuō)我們?cè)跈z查時(shí)主要留意以下幾個(gè)方面:

A.結(jié)合交互說(shuō)明進(jìn)行逐條驗(yàn)證

一般我們的交互說(shuō)明已經(jīng)特別詳盡,包含各類特別狀態(tài)和細(xì)節(jié)交互。因此我的建議是在驗(yàn)證的時(shí)候可以結(jié)合我們之前的交互說(shuō)明進(jìn)行對(duì)比驗(yàn)證,避開(kāi)某些部分被遺漏或者忽視。

消失問(wèn)題有可能是我們的交互闡述的不夠清楚或者說(shuō)研發(fā)沒(méi)有了解設(shè)計(jì)的規(guī)律,這些狀況都是有可能發(fā)生的,因此我們?cè)谶€原度驗(yàn)證時(shí)更需要細(xì)心驗(yàn)證和溝通。

B.交互說(shuō)明未提及的特別狀態(tài)

這其實(shí)是許多設(shè)計(jì)師常常遇到的問(wèn)題。我們?cè)趯懡换フf(shuō)明的時(shí)候不行避開(kāi)會(huì)忽視某些細(xì)節(jié)點(diǎn)。這個(gè)時(shí)候假如消失交互說(shuō)明漏掉的特別狀態(tài),就需要和開(kāi)發(fā)團(tuán)隊(duì)進(jìn)行溝通。

假如是重要且影響體驗(yàn)的問(wèn)題,可能就需要拉著開(kāi)發(fā)團(tuán)隊(duì)進(jìn)行溝通,評(píng)估下時(shí)間進(jìn)行修改;

假如是不重要且不影響的體驗(yàn)的問(wèn)題,就可以等下個(gè)迭代或者后續(xù)再進(jìn)行對(duì)應(yīng)修改;同時(shí)對(duì)問(wèn)題做好記錄,避開(kāi)下次再消失類似問(wèn)題。

這同時(shí)也反向要求我們?cè)诮换フf(shuō)明中盡可能考慮得更加全面,才能避開(kāi)多次返工。關(guān)于這塊有個(gè)小建議,可以將平常遺漏的交互記錄下來(lái),形成關(guān)于自己薄弱交互環(huán)節(jié)的自查表。通過(guò)建立專屬的交互自查表來(lái)強(qiáng)化自己對(duì)于各類狀態(tài)的認(rèn)知,從而將說(shuō)明寫得更加詳盡和完善。

2.3視覺(jué)內(nèi)容

視覺(jué)的還原度檢查可以說(shuō)是占據(jù)了整體檢查的大部分內(nèi)容。究竟功能或者交互還有測(cè)試團(tuán)隊(duì)幫忙驗(yàn)證,但視覺(jué)細(xì)節(jié)只能靠設(shè)計(jì)師本人來(lái)進(jìn)行走查了。在這里我將其分為以下幾塊內(nèi)容:

1.「像素眼」觀看法

由于習(xí)慣問(wèn)題,設(shè)計(jì)師對(duì)于字體的大小,元素的對(duì)齊有一種天生的敏感,因此對(duì)于某些比較明顯的還原度問(wèn)題,設(shè)計(jì)師是能夠通過(guò)直接觀看發(fā)覺(jué)的,比如某些元素沒(méi)有左對(duì)齊。

但這種只適合許多明顯偏差的元素,在大部分時(shí)候,設(shè)計(jì)師還是需要借助幫助工具來(lái)幫助進(jìn)行還原度走查。

2.檢查元素(F12)幫助走查

在許多時(shí)候,我們發(fā)覺(jué)某些元素存在問(wèn)題,但不確定的時(shí)候,我們就需要借助檢查元素幫助還原度走查。檢查元素如何操作呢,可以通過(guò)右鍵-檢查或者直接按F12來(lái)調(diào)出,通過(guò)鼠標(biāo)選擇元素,即可查看該元素的全部屬性,包括字號(hào)、顏色、寬度等等都可以直觀的看到。

利用這種方法我們可以檢查得特別細(xì)致,比如某些微小的間距是否精確?????,都可以檢查出來(lái)。

那么在這里我們可以簡(jiǎn)潔介紹下前端的盒子模型,也就是你在檢查元素中可以看到類似盒子的元素。盒子模型是CSS中的概念。全部的HTML元素都可以看作一個(gè)盒子,是用來(lái)設(shè)計(jì)和布局時(shí)使用。它包括我們常見(jiàn)的邊距、邊框、填充和實(shí)際內(nèi)容。通過(guò)了解盒模型有助于我們理解前端是如何進(jìn)行頁(yè)面布局的,同時(shí)也關(guān)心我們?cè)谧卟闀r(shí)更直觀地看到其中的間距和寬度等。

其實(shí)檢查元素還能幫助交互狀態(tài)走查,這可能是許多設(shè)計(jì)師忽視的一個(gè)點(diǎn)。比如我們?cè)O(shè)定了hover按鈕時(shí)有灰色底塊,此時(shí)我們?nèi)绾悟?yàn)證灰色塊的色值和大小是否精確?????呢。

其實(shí)幫助元素也可以幫忙,如下圖所示,我們通過(guò)勾選hover這個(gè)狀態(tài),界面中就會(huì)直接呈現(xiàn)當(dāng)前元素的hover狀態(tài):

3.借助工具幫助走查

目前市面上有兩種常用的工具,想必許多設(shè)計(jì)師也已經(jīng)知道了。分別是CSSPeeper和Copiexl。

首先推舉的是CSSPeeper。這款插件其實(shí)就是類似于檢查元素,只是界面會(huì)更簡(jiǎn)潔,相比于檢查元素去掉了許多干擾元素,打開(kāi)后我們點(diǎn)擊頁(yè)面上的元素就能夠直接看到其對(duì)應(yīng)的元素屬性和間距等。對(duì)于設(shè)計(jì)師群體來(lái)說(shuō)還是比較友好的。

地址:/

其次款的則是字節(jié)出品的Copiexl。其對(duì)比方式會(huì)比較簡(jiǎn)潔粗暴,就是將設(shè)計(jì)稿和開(kāi)發(fā)稿在相同尺寸下進(jìn)行疊加對(duì)比,從而看出來(lái)有哪些區(qū)域是不一樣的,從而快速找出不對(duì)的地方。教程官網(wǎng)都有,我這里就不進(jìn)行具體介紹了。

地址:/

三、還原度如何記錄

通過(guò)以上幾種類型的檢查,基本上都可以檢查出大部分還原度問(wèn)題,那么此時(shí)如何與進(jìn)行溝通呢,這個(gè)時(shí)候避開(kāi)以下兩個(gè)做法:

直接當(dāng)面找到開(kāi)發(fā),給他說(shuō)許多還原度問(wèn)題。由于開(kāi)發(fā)在這個(gè)階段也有許多其他工作,不僅會(huì)打斷他工作,他也不肯定記得這么多細(xì)節(jié);直接將還原度問(wèn)題在談天窗口直接發(fā)出去。通過(guò)談天記錄看還原度,不僅不便利查看,還很簡(jiǎn)單遺漏掉部分信息。

因此正確的做法是建立一份還原度文檔記錄表,內(nèi)容包含:模塊,詳細(xì)問(wèn)題,問(wèn)題截圖,問(wèn)題嚴(yán)峻程度,解決狀態(tài),對(duì)應(yīng)開(kāi)發(fā)。

在這里需要留意的一點(diǎn)就是面對(duì)間距問(wèn)題不正確時(shí),不要直接跟開(kāi)發(fā)說(shuō)你去找設(shè)計(jì)文件對(duì)比下,而是直觀地在還原度截圖中告知他這里的正確間距,這樣能夠節(jié)約雙方的時(shí)間,也避開(kāi)開(kāi)發(fā)再次看成錯(cuò)誤的尺寸。

這樣的話不僅能夠清楚記錄每條還原度,開(kāi)發(fā)還能夠依據(jù)重要程度有優(yōu)先級(jí)地改掉問(wèn)題,同時(shí)也可以為我們后續(xù)做校驗(yàn)供應(yīng)支撐。

四、如何讓整體變得更好

通過(guò)整體流程的梳理,不難看出還原度驗(yàn)證過(guò)程其實(shí)也是協(xié)作過(guò)程。因此想要很高的還原度,我們也需要在以下方面做得更好:

團(tuán)隊(duì)內(nèi)部有嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范,避開(kāi)多設(shè)計(jì)師協(xié)作時(shí)同一控件用了不同的表現(xiàn)形式;注意設(shè)計(jì)宣講和重點(diǎn)標(biāo)注。在進(jìn)研發(fā)時(shí)設(shè)計(jì)宣講是必要的,能夠讓研發(fā)人員了解我們的整體設(shè)計(jì)規(guī)律以及我們關(guān)注的重點(diǎn),同時(shí)我們?cè)趯懡换r(shí)也可以將重點(diǎn)字段用不同的顏色進(jìn)行標(biāo)記,從而讓研發(fā)人員在寫得時(shí)候能夠引起重視注意信息同步。我們?nèi)康母膭?dòng)都需要將其同步給研發(fā)和測(cè)試人員,同時(shí)也可以在我們的設(shè)計(jì)稿上標(biāo)記好更新內(nèi)容,這樣整體的協(xié)作會(huì)變得更加順暢,也避開(kāi)信息差導(dǎo)致的更新不準(zhǔn)時(shí)。避開(kāi)頻繁修改,不論是誰(shuí)面對(duì)頻繁修改都是不太快樂(lè)的,因此我們對(duì)于已經(jīng)進(jìn)入迭代的設(shè)計(jì)稿,因此假如面對(duì)必要的修改時(shí)要準(zhǔn)時(shí)同步信息。假如一些不太重要的改動(dòng)也可以先放一放,后面再改。寫在最終

當(dāng)我們驗(yàn)證完畢后,記得有一份還原度報(bào)告作為最終的檢測(cè)憑證

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論