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

本文和大家交流一下微信聊天頁面中的已讀、未讀標(biāo)記的原型效果的實(shí)現(xiàn)方法。

微信是很多人模擬的第一個(gè)產(chǎn)品原型。雖然微信以極簡著稱，但在制作原型的過程中才發(fā)現(xiàn)其功能的實(shí)現(xiàn)并不像想象中的那么簡單。

這個(gè)系列的文章主要講微信聊天列表中對話已讀和未讀的切換、置頂?shù)脑O(shè)置取消，以及對話的刪除。使用的軟件為Axure RP8。

受篇幅的限制，本文主要講述微信原型的頁面布局及標(biāo)記已讀、未讀操作。

原型的查看網(wǎng)址為：https://nskveq.axshare.com/#c=2

一、微信的頁面布局

為了還原微信的清晰畫質(zhì)，熟悉不同機(jī)型的適配尺寸，在這里我并沒有采取截圖+熱區(qū)的原型制作方法，而是利用不同元件的組合對微信界面進(jìn)行了還原。

1. 原型尺寸

以主流的安卓手機(jī)為例，豎屏原型尺寸為360px×640px。通過右拉和下拉頁面中的標(biāo)尺可以添加輔助線。

2. 微信聊天頁面的布局

（1）聊天頁面的頂部和底部

打開微信聊天頁面，最上層是深灰色矩形，大小為360×70，顏色可通過取色器實(shí)現(xiàn)。

矩形頂部為手機(jī)狀態(tài)欄，包含網(wǎng)絡(luò)狀態(tài)、信號狀態(tài)、電池剩余電量和時(shí)間信息等等；底部為微信、通訊錄、查找和添加功能按鈕。

其中，時(shí)間信息需要引入函數(shù)，與系統(tǒng)時(shí)間相匹配。方法為添加頁面載入時(shí)用例，在時(shí)間文本標(biāo)簽中設(shè)置文本為時(shí)間函數(shù)，如圖所示。

微信聊天頁面的最底層為“微信”、“通訊錄”、“發(fā)現(xiàn)”和“我”4個(gè)Tab鍵。字號為12，圖標(biāo)高度和寬度均為25。

為方便后續(xù)頁面的切換，設(shè)置4個(gè)標(biāo)簽的選項(xiàng)組名稱為Tab，并將圖表和文字的選中樣式設(shè)置為綠色。顏色的設(shè)置同樣用取色器實(shí)現(xiàn)。

（2）聊天頁面的主體部分

微信聊天頁面的主體部分用中繼器實(shí)現(xiàn)。具體操作如下：

中繼器由1個(gè)圖片元件，一個(gè)變換形狀的矩形元件①，4個(gè)文本標(biāo)簽和1條水平線組成。高度為65，圖片大小為50×50，名稱、對話內(nèi)容及時(shí)間的字號分別為14,12和11。

在Excel中編輯中繼器的內(nèi)容，將內(nèi)容復(fù)制至于中繼器中，列的名稱與Excel表格標(biāo)黃的部分一致。將其中的index元件隱藏，該元件的作用是保存每項(xiàng)對話的原始編號，這部分在設(shè)置置頂?shù)臅r(shí)候會用到。

在中繼器的image列中，導(dǎo)入從網(wǎng)絡(luò)中獲取的圖片，作為對話中的頭像。為中繼器添加每項(xiàng)加載時(shí)用例，將表格中的內(nèi)容與中繼器對應(yīng)起來。

這里應(yīng)注意，矩形元件①顯示與否，需要通過添加條件來確定。當(dāng)表格中的read值為yes時(shí)，該元件隱藏；表格中的read值為no時(shí)，該元件顯示。

此時(shí)，聊天頁面中繼器的狀態(tài)如圖所示（為清楚展示，此處未隱藏index文本標(biāo)簽）：

二、未讀的設(shè)置與取消

1.?choose元件的設(shè)置

在頁面中放入三個(gè)矩形并組合。矩形中的文字分別為“標(biāo)記未讀”、“置頂聊天”和“刪除該聊天”。由于每次只有一個(gè)矩形被選中，因此設(shè)置選項(xiàng)組名稱為“choose”。

按照微信中的該元件的樣式，對原型中的矩形元件進(jìn)行修飾，并設(shè)置選中狀態(tài)的矩形為灰色。顏色的設(shè)置采用取色的方法。設(shè)置choose元件的默認(rèn)狀態(tài)為隱形。

2.?choose元件用例的添加

在微信中，choose元件的顯示是通過長按操作來實(shí)現(xiàn)的。同時(shí)，choose元件顯示的位置為手指觸碰點(diǎn)的坐標(biāo)。因此為中繼器添加鼠標(biāo)長按時(shí)用例。

長按時(shí)，首先清空中繼器中所有可能的標(biāo)記，只對點(diǎn)擊的行進(jìn)行標(biāo)記。移動choose元件到達(dá)坐標(biāo)[[Cursor.x]],[[Cursor.y]]。

將choose元件移動到指定位置后，接下來是顯示該元件。在顯示元件之前，應(yīng)對中繼器中的數(shù)據(jù)做判斷：

如果該行是未讀的，那么彈出的choose應(yīng)顯示“標(biāo)記已讀”；反之，如果該行已讀，則彈出choose顯示“標(biāo)記未讀”。

choose元件中的第一個(gè)矩形添加鼠標(biāo)單擊時(shí)用例。單擊矩形后，choose元件回到隱藏狀態(tài)。隨后，對中繼器中read行進(jìn)行更新。這一步驟遵循如下邏輯：

• 該行為已讀時(shí)：read的值為yes，①呈現(xiàn)隱藏狀態(tài)。長按中繼器，標(biāo)記中繼器中的行，顯示“標(biāo)為未讀”。點(diǎn)擊“標(biāo)為未讀”，更新標(biāo)記行中的read值為no，①呈現(xiàn)顯示狀態(tài)。
• 該行為未讀時(shí)：read的值為no，①呈現(xiàn)顯示狀態(tài)。長按中繼器，標(biāo)記中繼器中的行，顯示“標(biāo)為已讀”。點(diǎn)擊“標(biāo)為已讀”，更新標(biāo)記行中的read值為yes，①呈現(xiàn)隱藏狀態(tài)。

其用例如圖所示：

此外，還需添加鼠標(biāo)移入和移出時(shí)矩形的選中、取消選中用例，使原型更加完整。

三、本文的踩坑回顧和待解決的問題：

1. 在一開始設(shè)置未讀標(biāo)記①時(shí)，筆者沒有在中繼器中添加該元件，而是在主頁上添加了這個(gè)元件，并試圖通過添加移動該元件到指定位置的用例來實(shí)現(xiàn)未讀的標(biāo)記。

事實(shí)證明這種方法非常麻煩，最終放棄。

2. 微信中聊天的排列順序是按照時(shí)間由晚到早排序，這個(gè)排序我還沒能用Axure實(shí)現(xiàn)，不知道哪位大神可以指點(diǎn)一二。

作者：子衿，微信公眾號：互聯(lián)記，知乎賬號：子衿

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

題圖來自unsplash，基于CC0協(xié)議