編輯導語：在產品中，有某些情況是客觀存在但卻極少出現的，這就是產品中的邊緣情況，而邊緣情況的發生會影響用戶的使用體驗，因此產品設計時需要考慮到如何應對邊緣情況的發生。本篇文章里，作者就邊緣情況的類型、應對策略等方面做了總結，一起來看一下。

一、講在前面

作為一名職場中合格的交互設計師或產品經理來說，避免在工作中出現遺漏各種邊緣情況的考慮，與規避在方案評審的時候會遭到評審會中其他同學的各種diss的尷尬，是評判交互方案和交互設計師活好不好的重要評判指標。

所以，產品設計方案好賴看產品和交互的能力，產品和交互能力的好賴不得不看邊緣情況怎么處理了。

交互設計其實是“向好避壞”并行的設計過程，向好設計是要追求絕對的好，結合實際情況竟可能保證產品體驗的舒適和驚喜，這是產品設計一定要為用戶的極致體驗需要負責的；避壞設計是相對的壞，結合實際情況盡可能為一些低頻場景的極端情況做好容錯方案和機制，這就是產品設計中常常提到的邊緣情況處理設計。

二、什么是邊緣情況

從產品角度來講，邊緣情況是在用戶使用APP的時候，極少會出現但是又客觀存在的、會極大影響產品使用體驗的一些不可控場景，這是區別于需求功能設計的一種隱性問題。

邊緣情況的出現往往是和硬件設備、系統、技術和使用環境有強關聯的，和產品需求或交互設計本身關聯較小，但是也有一些極少的場景，之后我們會給大家舉簡單的例子作為解釋。

iOS 14 中遇到的邊緣情況

對于所有的邊緣情況來說，其實，不管哪一種因素導致的不可控的情況發生，作為交互設計師或產品經理來說，我們都可以用嚴謹的邏輯來將意外的邊緣情況預先做出優化處理。

但是通常在產品設計的時候，邊緣情況是很難被我們通過設計方法所避免的，同時，邊緣情況也會隨著網絡技術、硬件設備、系統及技術的變化而變化的，而且有時候業內也會將“解決邊緣情況問題”的能力作為一個產品經理或交互設計師是否有經驗是否資深的一個評判標準。

所以，在日常的工作中，能主動應對或者在輸出需求和交互方案時，可以先入為主地考慮和走查自己是否考慮到邊緣情況的處理機制就顯得格外重要了，這就是區別你和普通產品經理或交互設計師的一個直觀評判標準了。

三、邊緣情況分類

1. 環境主導類：比如最常見的了網絡狀況，弱網加載、斷網加載，云端內存已滿、系統問題、磁干擾等等。
2. 硬件主導類：硬件內存上線、硬件CPU超高超低溫度影響、多按鍵沖突等。
3. 軟件主導類：多設備多賬號同時登陸、圖片縮放上限未限制、新功能在新老版本中的兼容問題等。

四、邊緣情況處理

關于邊緣情況的解決方案大致可分為3類。

1. 錯誤提示

該解決方案是相對研發成本最低的一種處理方法，但是，對于用戶來說，體驗感是最差的。這類解決方案往往以dialog或toast給予用戶錯誤提示，如下圖抖音斷網提示：

抖音 v15.4.1

2. 引導解決

這是遇到邊緣情況最常用的一種解決方案，也是一種比較“中庸”的方法，可同時堅顧研發成本和用戶體驗的平衡，也是對于一些環境主導的邊緣情況的最佳解決方案，因為環境主導型的邊緣情況有時候只能用戶自己解決，APP是沒有辦法真正避免的。

該類解決方案往往會給出用戶具體的解決步驟，如下圖微信斷網提示：

微信 v8.0.4

3. 預備planB

該解決方案應該是對用戶體驗最友好的解決方法了，這就是一種難受自己、滿足用戶的“自虐行為”，它可以在最大限度不干擾用戶的前提下，默默處理掉一些突發的邊緣情況而用戶卻毫不知情，但是這種解決方案就會加大開發成本和損耗研發人員的大量腦細胞了。

這種預先做好planB的處理方法通常用戶是對已經出現的邊緣情況無感知的，比如微信（v8、v7）的朋友圈評論處理機制，在斷網或弱網情況下，用戶評論或點贊朋友圈是沒有任何斷網弱網提示的，這是因為微信將用戶操作數據保存到本地，等有網的情況下再次請求數據知道評論或點贊成功為止，這樣就很好地避免了打斷了用戶評論和點贊行為。

五、常見的邊緣情況lists

1. 環境主導型

• 網絡狀況不好時，如，弱網、無網情況時的加載等待和請求失敗的提示。
• 根據網絡類型選擇不同的數據加載方案：如瀏覽視頻時，對于手機網絡的判定為無線網或數據流量時的區別對待，無線網絡連接時，視頻圖片都內容提前預加載，視頻自動播放；使用數據流量時不預加載視頻音樂等耗流量的內容，也不自動播放。
• 從云端拉取數據時，如，iOS中，用戶選圖發送feed時，如選擇了被存儲在iCloud里的情況時，圖片和視頻需要先下載到本地，這里需要給與用戶下載提示反饋，和等待措施。
• 安卓輸入法鍵盤是系統的，光標和輸入法不能聯動同步。

2. 硬件主導型

• APP內存情況：APP中打開照片和視頻預覽頁與APP外存即手機內存：刪除該預覽照片和視頻時的顯示邏輯。
• 相冊選圖達到最大限數后，其他圖片置灰時，有些安卓機子性能不好會出現卡頓，和一屏顯示幾乘幾的圖片以及用戶最多可選多少張圖也有關系。
• 多端聯動：賬號被另一設備登出，可多設備同時登錄還是僅限一臺設備登錄，還是半閉狀態，部分功能可多設備使用，部分功能僅限一臺設備使用。

3. 軟件主導型

• APP拍攝圖片使用上傳為頭像背景圖時是否存儲在本地相冊，何時何種行為后儲存等。
• 圖片縮放和異形圖（超高超長圖處理）可放大至多少像素或原圖的多少倍。
• 加載動畫出現的時間限制，加載時長超過1s后在顯示加載動畫，一般為中心加載長設限，類似Instagram的替補狀態欄加載的橫條加載動畫影響不大。
• 新功能在老版本中的兼容問題。
• 手勢滑動距離的設定，類ins相冊上滑交互的考量。

每一個設計需求的背后都必然有其商業邏輯在里面，所以在拿到設計需求后，嘗試多去問幾個為什么。有什么樣的商業目標？為什么做這個功能？用戶是誰...當你琢磨清楚這些之后，并以此為出發點的設計方案，必然是有據可依、有說服力的，多角度的參與產品設計也更能體現設計師的價值、培養全局觀。

商業目標是個大方向，有了目標就會產生解決方案（需求），當然方案可能不只是一種類型（可能是APP、網站、宣傳H5或宣傳海報等），設計師負責的去做的可能只是其中的一種。

以我參與過的冬奧會某冰雪 APP TAB 欄的 ICON 風格設計為例：

01

業務溝通，商業目標分析，明確設計目標

這個階段一定要多去溝通、溝通、再溝通，如果是產品公司，那么需要去和產品、研發、市場等多部門溝通；如果是外包項目，那么就需要和客戶多次溝通。退而求其次，也要和負責該項目的直屬領導多去溝通，以求更精準的了解商業目標，最終明確設計目標，從而為接下來的設計創意設計指明方向。

該項目為二次設計外包項目，著手出圖之前，我和該項目負責人、項目小組成員多次深入的討論了甲方為了什么目的去做？從而確認了商業目標：“傳播冰雪文化，激發人們對冬季運動的興趣和熱情”。

這是個大方向，接下來去考慮用什么形式承載，可能是常見的APP、網站、小程序...（這個形式還需要考慮下目標用戶的使用習慣）。以及更具體的有哪些內容分類、個性化主題設計、互動形式等。

最終，該項目負責人決定采取安全策略（作為項目負責人，對投入產出比等全局性因素的考量是極其重要的），先做一款內容型APP，內容分類借鑒、提煉幾款APP的精華，暫不考慮獨創功能。

雖然有時候結果未必和自己期待的一致，但積極去參與的過程是應該的。。

知曉了商業目標和產品內容，接下來就有方向了。我將設計目標定為：將設計與“水凝化冰、冰積成雪”的物理現象相結合，體現冰雪主旨，烘托冬季競技氛圍。

02

創意分析，設計推演

這個階段重點在于說服力，或許關系到客戶是否買單。由于是內容型產品，內容結構上和其它APP并無太大區別，那么客戶會不會想：你們是不是抄了一個軟件，改了改就發給我了。?；诖?，我在設計創意推演前，做了內容分類由來的分析。

人類接受信息的三種方式：視覺、聽覺、觸覺，對用戶傳達冰雪文化采用這三種手段，規劃APP內容，視覺：圖文資訊、視覺畫面；聽覺：音視頻、直播；觸覺：榜單、互動等。

借用“水凝化冰，冰積成雪”物理現象，結合基因創意法，對 ICON 進行設計推演，緊扣冰雪主旨。

通過品牌LOGO取色法，提煉 ICON 配色。

03

設計執行

到了這個階段，基本的設計思路應該是比較清晰了，剩下的細節打磨就可以自由發揮了。

至此，一個ICON的設計已完成。該過程的最大價值在于：幫助項目理清了整個項目的核心價值、創意思路與設計提案思路，甚至可以由此推測到未來產品的功能規劃方向，當然最重要的是協助項目負責人成功拿下了項目。

一個簡單的漢堡菜單就可以包括多種不同的樣式，可能有的樣式甚至沒有官方的名稱，但因為樣式的差異在功能上這些菜單也會出現差異性。

我們可以通過分析這些樣式，來思考不同的樣式代表著怎樣的設計含義和設計目的，不能因為簡單常見而忽視了功能的內核。

漢堡菜單

關鍵詞：橫條、多個菜單選項

這個圖標的樣式簡潔易懂，通常位于網頁和 App 的上下角，用來告知用戶這個按鈕之外還有更多內容可以探索。

當產品有多個菜單選項時，考慮使用漢堡圖標來顯示，但盡可能避免在桌面視圖中使用。

垂直三點式菜單

關鍵詞：垂直、內嵌菜單

通常位于屏幕或窗口的右上角或頂部，是用于打開帶有附加選項的圖標，打開的內容往往是一個較小的內嵌菜單而不是整個全新的頁面。

水平三點式菜單

關鍵詞：水平、內嵌菜單、web

水平三點式菜單同樣常位于屏幕或窗口的右上角，用于打開菜單或顯示相關項的操作。

因為圖標樣式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。

九宮格菜單

關鍵詞：子分類、子功能

九宮格菜單通常用于打開同一產品中包含不同子產品或子功能，可以在它們之間快速切換，此圖標常位于產品主頁的右上角。

過濾式菜單

關鍵詞：過濾、排序

過濾式菜單由三行不同長度的線段水平疊放而成，是最廣泛使用的過濾符號?？梢詫⑦^濾式菜單與“排序方式”選項結合使用，或者與全局過濾器結合使用。

漢堡菜單變體

關鍵詞：樣式特殊、時尚感更強

作為漢堡圖標的替代品，與顯示列表菜單的目的相同嗎，但是這些樣式我們平常見的可能會比較少，更常用在充滿現代感、時尚感和藝術感的網站上。

最后

不同的樣式可能代表著截然不同的設計目的，常思考這些小而精的細節，是保證產品體驗提升的關鍵。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

搞定客戶/同事的方法

說服客戶的方法

大部分客戶都是很挑剔的，所以一稿過是很多設計師的夢想，其實客戶也不是刻意要刁難設計師，如果你的設計方案能夠把設計需求展現出來，同時還有一套正確的設計邏輯，那么客戶也是很容易被說服的。這篇文章總結了讓客戶埋單的設計思路：

找準客戶的審美

設計師面對的客戶千奇百怪，以設計師自身對于審美和需求的理解往往容易產生誤解和矛盾，那么要怎么了解客戶的審美以及深層的需求？看看高手是怎么做的：

實現「大氣」的設計

改稿絕對算得上是設計師的一項日常操作，這一點我們都深有體會，至于改稿的原因則五花八門，不是客戶嫌棄太小氣、沒創意，就是上級嫌棄太土、太單薄等等?？墒谴髿獾脑O計可不僅僅是 LOGO 要大、字要大、圖要大，那么真正的大氣要怎么做呢？看這個：

對抗質疑的方法

很多同學可能都碰到過一個很頭疼的問題，比如來公司時間不短了，但是在公司毫無話語權可言，不論是所在團隊還是業務方，甚至連對接的開發，都可以對他的設計稿提出質疑。而且總是無法順利得說服對方，導致無窮無盡得改改改。那么這個問題要怎么解決呢？這個套路一定要了解：

UI 設計

UI 的基礎概念

酸梅干超人的新系列文章來了！這次，他要輸出一部完整的 UI 零基礎學習指南，根據 UI 新手系統學習 UI 設計的順序，陸續會輸出 12-15 篇不同模塊的系列性文章，而這篇是這個系列的第一篇：

UX 設計流程

在如今的產品設計團隊中，體驗設計師需要做的事情已經跨越了職能邊界，為了尋求更好的設計方案，常常要承上啟下地連接整個團隊。這篇文章將設計流程中定義問題、創意發散、原型 & 測試、復盤反思四大設計流程細化為 12 個步驟，詳細講述了每個步驟用戶體驗設計師涉及的職能任務和思考：

UI 卡片設計

很多人對 APP 中的卡片設計習以為常，但對于卡片設計流行的原因、優點，以及如何做好卡片設計卻可能不甚了解。這篇國外大佬寫的文章，算是從為什么這樣做的角度來分析卡片設計，一起來學習吧：

可視化表單

這篇文章出自資深 B端設計師 Taras Bakusevych，他深耕 B端設計多年，對于表單、可視化設計、UI/UX 都有著豐富的經驗。這篇梳理了 20 個可視化設計的常見技巧，實用性和指向性都非常強：

產品交互

百度大字版設計

當下移動 APP 產品缺少對老年人體驗的深層次關注與設計，只通過單一加大字號與簡化功能等解決基礎體驗，缺乏通過新技術應用和更全面的適老化設計服務老年群體，老年人的需求依舊未得到關注和滿足。百度基于自身的 AI 技術和精細、系統的適老化設計，適時推出百度大字版，使老年人更平等地獲取信息和服務、獲得情感陪伴：

交互說明文檔

怎么樣的交互說明才是最好的，是大家都喜歡的？這個問題想必很多同學都想知道，因為不少同學將寫的交互說明文檔提交給需求評審會的成員審核時，總會碰到「寫的更合理些」的建議，這確實讓人透了腦筋。來看看高手是怎么解決問題的吧：

社交 APP 趨勢報告

移動互聯網在悄然改變著用戶的社交方式和社交需求，這篇文章根據近一兩年技術創新和用戶代際更迭導致的用戶需求差異化，來探索社交的設計趨勢，幫助我們應對變幻莫測的互聯網：

視覺設計

酸性設計風格解析

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

最近在使用vue el-date-picker時間控件，發現直接獲取的時間是日期格式，而我需要的格式是

yyyy-MM-dd HH:mm

那么如何轉換時間控件格式呢

<el-date-picker 
v-model="selectDatetime"
 type="datetime" placeholder="選擇時間"
 @change="dataSearch" value-format="yyyy-MM-dd HH:mm" 
format="yyyy-MM-dd HH:mm"> </el-date-picker>

在日期控件中，加入上述加粗格式即可

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
來源：csdn

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    {{msg}}
    <div>
        <input v-model="txtValue">
        <button type="button" @click="handleSubmit">提交</button>
        <ul>
            <li v-for="(item,index) of list"
                :key="index"
                :index="index"  @click="deleteItem(index)" //傳遞下標值 >
                {{item}}
            </li>
        </ul>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello Vue!!',
            txtValue: '',
            list: []
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.txtValue)
                this.txtValue =''
            },
            deleteItem: function (index) {
                //alert(index)
                this.list.splice(index,1) //通過下標刪除 }
        }
    })
</script>
</body>
</html>

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
來源：csdn

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務