列出了設計頁面時需要考慮的幾種常見情況:
1，單詞多的時候考慮。
2.沒有內容時的考慮
3.背景圖像多樣化時突出顯示內容信息的考慮。
4.關於按鈕寬度定義的思考
5、按鈕多狀態考慮
6.布局中的最大顯示考慮
換行符，最大限度省略，沒有相關內容信息時沒有內容相關的說明文案。
這是當時做的B端頁面列表，進度的彩色字體部分可以點擊查看工單處理詳情。
但是後臺看了壹下網上的數據，有些房屋地址比較長，在頁面列表中房屋地址是用戶重要的區分信息。更重要。另壹個問題描述也比較長，在頁面列表中起到快速定位和過濾的作用，所以需要在列表中完整顯示。
在這兩條消息之間，顯示具有以下形式。
當房屋地址和問題描述超過壹行時，換行。壹般兩行的內容就足夠顯示全部信息了。即使在特殊和極端情況下不顯示全部信息，也足以顯示關鍵信息以區別列表中的其他信息。為了防止極端情況下的信息顯示，當超過兩行時，內容被省略。如果您想查看所有信息，請輸入特定視圖的詳細信息。
因為列表是為了快速瀏覽信息，所以重點是顯示關鍵信息之間的差異，用戶可以快速定位並篩選出需要緊急處理的信息。這就要求最大限度的簡化，次要信息和詳細信息不要顯示在列表中。
在處理了房屋地址和問題描述信息的極端顯示方式後，又出現了壹個新問題，就是工單數量不固定，有時候會特別長。當經辦人離職後，員工的工號會顯示在他的名字後面，這樣兩條信息就會重疊。
經過與產品經理溝通，工單編號並不是這個列表中的必要和重要信息，因為編號是系統自動給出的，對於用戶來說並不是重要信息，壹般以熟悉的房屋地址和問題描述作為重要的區分信息。工單編號對這個列表中的用戶意義不大，可以考慮去掉。和後端開發同學確認後，工單編號和後續處理進度是兩個字，可以隱藏。這樣，該工號就從列表中刪除了。
因為處理者離職後會顯示他的員工號，字段會比較長，但是員工的員工號對用戶來說是沒有意義的信息。但是和後端開發的同學確認後，很難截取到同壹個詞的後端。於是我讓前端開發的同學對頁面顯示做了顯示限制(handler和前面的進度部分的最小距離是壹個固定的距離，當小於這個距離時，後面的handler字段就省略了。
此外，還存在未獲得進度信息的情況。在這種情況下，沒有工單信息，所以不能點擊。因此給出“無處理進度”的復印提示，並去除復印顏色，隱喻不可點擊。
壹個看似簡單的清單，背後可能隱藏著各種特殊的信息。只有設計全面，結合用戶場景定義限制和擴展性，上線後才能控制極端情況。特殊情況下顯示頁面內容也不會“無法識別”。
頁面無內容，搜索無內容，無網絡，服務器錯誤等。
在做項目需求的時候，有壹些默認的頁面設計，壹般是:頁面沒有內容的時候，搜索沒有結果的時候，沒有網絡的時候，服務器出錯的時候等等。這些都是在非正常情況下出現的頁面，它們出現的概率可能比較小，但是必然會出現。默認頁面的意義在於，當出現異常情況時，可以緩解用戶的焦慮情緒。
同時需要向用戶說明目前的情況，引導用戶做操作。這樣用戶就不會被困在問題中，要幫助他們快速走出問題。所以設計默認頁面是必須的，也是需要花壹些心思的(插畫風格，文案內容和形式等。)關於如何讓用戶“愉快地”度過“難關”，同時避免使用壹些專業術語，盡量用幽默、有趣、委婉的方式表達。
所以在頁面設計中不能忽視默認頁面，比如日常默認頁面、插畫場景與幽默文案的結合、引導按鈕等。體現了興趣，讓用戶接受這樣的“空白”。
暗背景和亮背景下內容的顯示效果
在提出需求時，我們經常會遇到需要在圖片上顯示文案的設計，尤其是壹些在產品圖紙上顯示信息的設計。這裏的圖紙不是固定的，而是不確定的，展示文案的位置可能是暗的，也可能是亮的。這時候就需要更全面的考慮了。比如在文案下面加壹層黑色漸變透明層，和諧，可以保證不同背景下白色文字的顯示效果。
按鈕寬度自適應(設置兩邊之間的最小距離)，並固定按鈕寬度。
制作頁面時，經常會遇到壹些選項標簽。如果知道標簽文案的長度，基本都是壹樣的長度，壹般不超過4個字。這樣的標簽適合使用同樣的寬度，看起來比較整潔。
但如果標簽上的文案不確定，字數無法確定，這種情況下，為了節省空間，靈活適應不同長度的文案，標簽壹般會在文案兩側定義間距值。
是什麽樣的標簽？目前的數據是多少？未來可能會添加什麽樣的標簽，這些都是越清晰越好，因為這些因素決定了標簽的設計形式和擴展性。網上就更不用說了，發現有的標簽文案放不下，然後需要被動換形式。這顯然不夠全面。
大多數應用程序通常對篩選按鈕標簽使用固定寬度的標簽。當然字數是簡化的，大部分控制在2-4個字。這樣的頁面看起來很整潔，用戶在使用時更容易瀏覽和選擇。
評測標簽壹般使用固定的左右間距，更靈活，可以適應較長的文案。二是節省空間，屬於非重要模塊類型。
在設計移動按鈕時，至少要考慮三種顯示模式:默認、點擊和禁用。這是三個基本狀態，缺壹不可。做的時候要考慮到，給出相應的風格。而不是開發童鞋然後問妳如何表現某種狀態，或者開發童鞋直接按照自己的想法給出壹個表格，因為開發是壹個具體的實施階段，涉及的細節更嚴謹具體。
另壹個場景是，當業務表單比較復雜時，需要考慮在當前狀態下點擊壹個操作按鈕會變成什麽功能按鈕，這與業務邏輯和任務流密切相關。需要在做需求的時候想清楚，然後展示出來。
尤其是在壹些列表中，當按鈕比較多，或者按鈕是根據不同的業務狀態來顯示的時候，這種情況下，不需要在頁面上顯示所有的按鈕，而是要有壹個“度”，根據業務形式和用戶使用場景來區分不同按鈕的重要程度。
當按鈕較多時，不重要和不常用的按鈕可以適當隱藏，指導操作的元素可以告訴用戶。例如，如果您設置了原則，則在頁面上最多可以顯示三個按鈕。超過三個按鈕時，部分按鈕被隱藏，可以告訴用戶點擊更多按鈕查看更多操作按鈕。
還有壹種是當壹個模塊內容很多的時候，用戶瀏覽累了，可以選擇性的查看。這些不重要的細節可以適當隱藏，用“全部”或“更多”按鈕引導用戶點擊查看更多內容。
我們平時可能用過很多app，很多時候我們只是“使用”它們，只是遵循應用本身的邏輯和指導來完成我們的任務。當妳找不到壹些功能或者不知道怎麽操作的時候，旁邊的人會告訴妳應該怎麽做，步驟是什麽。妳操作不了，往往是因為對應用不熟悉，甚至妳會懷疑自己“我智商有問題嗎？”。
但妳往往忽略了重要的壹點:那就是妳不會跳出來思考。為什麽要這樣設計？有沒有更好的辦法？指導有問題嗎？等等，要經常總結，多思考。不同的應用程序可能有不同的業務模型和不同的顯示方式，但設計模型及其背後的設計原則是相通的。
最後，希望妳我都能有思考、分析、總結、解決問題的能力。
插畫的七種風格——平鋪直敘、通俗易懂、風格普通、簡潔明了。
簡單來說，平面插畫就是為了簡化復雜的關系，讓畫面更加清爽整潔。也是現在常見的風格，很多商業工具類app都會選擇使用這種風格。比如拉鉤，打釘...
特點-平面插畫的變化，增加顆粒感，質感和良好的光影關系。
紋理插畫顧名思義就是在插畫中加入壹些紋理(如雜色)和光線，其本質類似於平面插畫。壹些想要體現質感的頁面會使用這種風格。以下是壹些設計師的作品。
特點——對藝術技巧的要求最高，應用廣泛，展覽內容豐富。手繪插畫的應用也很廣泛，比如壹些插畫繪本，故事場景設計等等。以下是插畫師顧鑫的作品節選。
特點——簡潔、圓潤、可愛、斷點
MBE插畫(dribbble的壹位設計師創造了這種風格)的特點是圓、可愛、傻、簡潔。APP中的引導頁、啟動頁、默認頁也是廣泛使用的。
特點——唯美，顏色相近，色彩鮮艷。
漸變插畫有點類似日本漫畫場景，風格特別唯美浪漫。光感比較強，所以也叫弱光插畫。顏色壹般都差不多，顏色種類不要太多。
特點——2.5d插畫，立體感強，視覺沖擊力強。
立體插畫又稱2.5D插畫，是在二維空間中表現三維的事物。所以現在越來越多的設計師都在學習C4D這個軟件。雖然AI和PS都可以，但是會比較麻煩。很多電商app都會選擇這種風格。例如，JD.COM。...
特征-形狀、筆畫、抽象畫處理
筆畫插畫不僅使用形狀，而且在其外輪廓使用筆畫，可以清晰地表達抽象的事物。它經常用在壹些圖標上，比如閑魚和走動。...
有哪些內容可以添加到默認頁面中，使其“豐富友好”？nathan _ arry _ _ designing _ EB _ duplication _ penalty _ parent _ WH”來幫助產品設計師解決此類問題。
首先，用戶很可能對妳的產品比較陌生，不太了解使用方法，這是妳利用默認頁面為他們提供使用說明的好機會。設計的時候可以用簡單明了的文案告訴用戶這裏會放置什麽樣的內容。在這裏花點時間，不要讓空白的默認頁面成為用戶看到的最後壹個狀態。
以下是壹些優秀的例子:
支付寶錢包的電子憑證和旅遊行程頁面通過賬單圖文+文字的方式清晰地說明了該類目下會出現什麽，並在屏幕下方提供了添加賬單的按鈕。
Dropbox是壹款非常流行的網絡文件同步工具。產品面臨的問題是需要引導用戶上傳內容。當用戶第壹次使用收藏、相冊和提醒功能時，通過灰度加線條樣式的圖標和純文本的描述告訴他們如何使用這三個功能。屏幕保持了壹致的品牌風格，減少了用戶因為列表裏什麽都沒有而產生的情緒挫敗感。
除了簡單的圖標和文字描述，有些應用還有更快更直接的方式:預置內容，即讓用戶直接體驗真實的信息內容或者壹些沒有想象力的樣本信息。
Shadow_uppet可以將照片和視頻剪輯與聲音、貼紙等結合起來。做動畫，制作簡單，被譽為視頻版的PPT。其首頁預設有視頻樣本進行展示，用戶可以通過觀看視頻案例對Shadow_uppet的視頻制作有感性認識。
在了解了信息的內容形式後，要給用戶提供壹個提交內容的理由。默認頁面的設計應該簡單的告訴用戶創建內容的好處，比如妳可以認識更多的人，妳可以更加有序高效的管理信息等等，幫助用戶產生使用的目的。
閱讀已購買和雲托管默認頁面，直接告訴用戶:快來買書，上傳到雲托管，讓妳有跨平臺同步書籍的體驗。
有情感的文案和插畫也能激發用戶提交內容的興趣。Headspace是由制作的壹個應用程序，專註於教人們如何冥想並提供語音指導。它的默認好友頁面為用戶提供了這樣壹個理由，通過添加好友，可以監督和鼓勵彼此的冥想過程。看到這麽可愛的默認頁面，用戶有什麽理由不邀請好友互相監督呢？
或者妳可以通過俏皮的文案鼓勵用戶在自己的頻道添加內容，就像興趣社交應用Same壹樣。
給用戶明確的操作說明，在界面中提供明顯的按鈕和箭頭指示用戶操作。最好將說明顯示在壹頁中。如果有很多步驟，可以拆分成具體的使用流程進行指導。
“樂動力”好友排名頁面，沒有添加好友，這個頁面顯示了壹些社交網絡圖標和大大的添加按鈕，提醒用戶可以通過綁定社交賬號找到更多好友參與PK鍛煉。
Pocket是壹個工具，它允許用戶壹鍵保存內容(文本、圖片甚至視頻)，並在其他時間用於閱讀。第壹次使用時，當其列表頁面沒有內容時，會顯示壹個按鈕“學習如何保存”。點按它以了解有關添加列表的各種方法的更多信息。
Taasky和Clear作為兩款優秀的交互任務應用，都擁有豐富的手勢操作。他們不會像其他軟件壹樣通過屏蔽和標記界面來制作冗長的用戶教育頁面，而是直接將操作指令嵌入到壹個任務中。用戶只需滑動帶有當前任務描述的屏幕，就能理解所有手勢操作，豐富了原本空白的默認頁面，自然指導用戶如何使用軟件。
Orgami是壹個折紙風格的筆記本應用程序。首次打開應用程序時，筆記本頁面不是空的。當然，這些預置的內容不僅僅是為了美觀，應用相關的操作說明也包含在這些筆記中。
當用戶剛開始使用應用程序時，通常會看到默認頁面的狀態。這個時候，他們對妳的產品還是很有耐心的。設計師應該抓住這個自然的機會與用戶交流，從以下幾點設計壹個空的默認頁面。
1._帽子
清楚地指出將出現在頁面中的數據。
可以嘗試讓用戶直接體驗樣本信息。
2._hy
鼓勵用戶提交內容。
3.怎麽
操作指導。
簡化步驟。
——end——
原文來自:_咨詢_SUX