在數(shù)字產(chǎn)品設(shè)計(jì)中,響應(yīng)式設(shè)計(jì)早已成為連接功能與體驗(yàn)的關(guān)鍵路徑。智能手表的表盤,作為最核心的信息承載區(qū),正在向“可感知、可適配、可延展”的方向不斷演進(jìn)。而我們將其類比為“數(shù)字卡片”,正是因?yàn)槎咴谠O(shè)計(jì)邏輯上的高度契合:都追求信息層級(jí)的清晰展現(xiàn)、內(nèi)容與場(chǎng)景的靈活適配,以及操作的直觀反饋。
卡片設(shè)計(jì)以模塊化、結(jié)構(gòu)清晰、響應(yīng)靈活著稱,能在不同屏幕與使用場(chǎng)景中自如調(diào)度內(nèi)容展示方式。而智能手表的表盤設(shè)計(jì)同樣需要在極小的顯示空間內(nèi),精準(zhǔn)傳遞時(shí)間、健康、通知等多維度信息。通過(guò)響應(yīng)式設(shè)計(jì)的引入,表盤可以根據(jù)環(huán)境光線、使用者習(xí)慣、交互狀態(tài)等動(dòng)態(tài)變化,自動(dòng)調(diào)整元素的排布與表現(xiàn)形式,實(shí)現(xiàn)“信息即所需,界面即交互”。
例如,在運(yùn)動(dòng)狀態(tài)下表盤可自動(dòng)突出心率與步數(shù);而在夜間,它又能切換為更具護(hù)眼性的低亮模式。這種“感知上下文”的能力,讓表盤從一個(gè)靜態(tài)的界面,變?yōu)橐粋€(gè)貼近用戶、主動(dòng)適應(yīng)的智能卡片。
響應(yīng)式的表盤設(shè)計(jì),不僅提高了使用效率,更拓展了產(chǎn)品體驗(yàn)的邊界。它像一張隨時(shí)變化的數(shù)字卡片,安靜卻聰明地陪伴在你腕間,把復(fù)雜的系統(tǒng)邏輯轉(zhuǎn)化為可感知的溫柔細(xì)節(jié)。
ChatGPT 是否有可能生成 UI?
我之前測(cè)試過(guò)幾次,但結(jié)果卻令人失望。
下面是我兩個(gè)月前在一份時(shí)事通訊中分享的一個(gè)例子。
它看上去太卡通了,不太實(shí)用。
然而,上周,OpenAI 推出了一個(gè)重大更新,所以我決定再次嘗試。
根據(jù)我的提示,我能夠生成更好的UI模型。我甚至可以根據(jù)自己的需求創(chuàng)建多個(gè)設(shè)計(jì)選項(xiàng):
今天,我將向你們展示我進(jìn)行的實(shí)驗(yàn)、我使用的提示以及過(guò)程中的一些驚喜和收獲。
讓我們開(kāi)始吧。
OpenAI 宣布,現(xiàn)在可以使用 GPT-4o 在 ChatGPT 中生成高質(zhì)量圖像,而不是使用較舊的 DALL·E 模型。
它更擅長(zhǎng)遵循指令,并且可以更好地呈現(xiàn)圖像中的文本。
上周,許多人嘗試將照片轉(zhuǎn)換成人工智能藝術(shù)作品——這就是吉卜力風(fēng)格藝術(shù)潮流流行的原因。
我也嘗試過(guò):
但在網(wǎng)上看到很多有趣的藝術(shù)作品后,我想:
如果我可以使用 ChatGPT 生成對(duì)產(chǎn)品設(shè)計(jì)師真正有用的 UI 會(huì)怎么樣?
實(shí)驗(yàn)就是從這里開(kāi)始的。
我使用 ChatGPT 來(lái)幫助我生成我想要的 UI 的詳細(xì)提示。
# 為名為“SkillVerse - 熱門微課程”的應(yīng)用設(shè)計(jì)一個(gè)簡(jiǎn)潔、現(xiàn)代的移動(dòng) UI 界面(iOS 風(fēng)格)。布局應(yīng)遵循以下結(jié)構(gòu)化部分。## 1. 狀態(tài)欄(頂部)- **樣式**:標(biāo)準(zhǔn) iOS 布局(頂部安全區(qū)域)---## 2. 標(biāo)題部分- **居中標(biāo)志**:“SkillVerse” - **字體**:中等粗細(xì),小尺寸 - **顏色**:藍(lán)色文本 ---## 3. 特色課程輪播(水平滾動(dòng))- **風(fēng)格**:具有圓角和柔和陰影的可滑動(dòng)卡片 - **卡片**: -**卡 1** - 標(biāo)題:**動(dòng)態(tài)設(shè)計(jì)簡(jiǎn)介** - 字幕:*4 月 2 日開(kāi)始* - 視覺(jué):動(dòng)畫縮略圖 -**卡 2** - 標(biāo)題:《自由職業(yè)者精通 Excel》 - 字幕:*3 月 31 日開(kāi)始* - 視覺(jué):生產(chǎn)力圖標(biāo) ---## 4. 導(dǎo)航標(biāo)簽-**標(biāo)簽**: - **趨勢(shì)**(活躍,**粗體標(biāo)簽**帶有**藍(lán)色下劃線**) - 受到推崇的 - 已注冊(cè) - 已保存 ---## 5. 過(guò)濾行- **過(guò)濾器(下拉菜單)**: - **過(guò)去 7 天**(基于時(shí)間) - **所有主題**(類別) - **所有級(jí)別**(難度) ---## 6. 熱門課程列表- **布局**:可重復(fù)課程項(xiàng)目的垂直堆疊: - **左**:圓形縮略圖 - **中心**: - 課程名稱 - 級(jí)別(例如,初學(xué)者、中級(jí)等) - **右**:保存圖標(biāo) - **底部**:入學(xué)人數(shù) + 趨勢(shì)(例如,入學(xué)人數(shù) 2.4k,+12%) ---## 7. 底部導(dǎo)航欄-**標(biāo)簽**: - **主頁(yè)**(活動(dòng),突出顯示顏色) - 搜索 - 活動(dòng) - 輪廓 - **風(fēng)格**: - 下方有標(biāo)簽
然后我將其粘貼到 ChatGPT 中的新聊天窗口中,然后單擊“生成”圖標(biāo)。
令人驚訝的是,ChatGPT 在右側(cè)打開(kāi)了一個(gè)額外的面板,觸發(fā)了它的 Canvas 功能。然后它開(kāi)始生成代碼。
這立刻讓我想起了克勞德的神器功能。
然后我點(diǎn)擊了右上角的“預(yù)覽”按鈕。
生成了響應(yīng)式、代碼支持的 UI。
看起來(lái)很有趣,但似乎不如克勞德那么精確/精致。
由于我的目的只是生成一個(gè)圖像(一個(gè)可視化模型)而不是一個(gè)代碼支持的 UI,因此我請(qǐng)求后續(xù)提示來(lái)糾正它:
創(chuàng)建一個(gè)可視化模型。而是一個(gè)視覺(jué)模型。
結(jié)果如下:
結(jié)果出乎意料地好,尤其是與 ChatGPT (DALL·E) 之前生成的版本相比。這是一個(gè)巨大的提升。
測(cè)驗(yàn):你能在上述 AI 生成的 UI 中找到多少個(gè)拼寫錯(cuò)誤?:)
盡管用戶界面看起來(lái)不錯(cuò),但我仍然對(duì)圖像截?cái)喔械接悬c(diǎn)困擾,所以我問(wèn)了:
頂部和底部看起來(lái)有點(diǎn)截?cái)?。您能?UI 縮小 20% 左右,讓它整體更小一些嗎?頂部和底部看起來(lái)有點(diǎn)截?cái)?。您能?UI 縮小20%左右, 讓它整體更小一些嗎?
結(jié)果如下:
看起來(lái)不錯(cuò)!
然后我開(kāi)始更有創(chuàng)意了……我想,如果我讓它生成多個(gè)設(shè)計(jì)方案供我參考會(huì)怎么樣?那會(huì)更有幫助!
所以我寫了這個(gè):
創(chuàng)建三個(gè)設(shè)計(jì)選項(xiàng)。使用相同的核心內(nèi)容,但根據(jù)以下描述改變布局、UI 元素和視覺(jué)重點(diǎn):選項(xiàng) 1. 大膽且引人入勝- 優(yōu)先考慮視覺(jué)沖擊力和品牌表達(dá)選項(xiàng) 2. 功能強(qiáng)大且快速- 優(yōu)先考慮速度、清晰度和生產(chǎn)力- 緊湊的用戶界面,卡片更小,信息層次更密集選項(xiàng)3.個(gè)性化和溫暖- 優(yōu)先考慮聯(lián)系、信任和個(gè)性化- “為你推薦”輪播,包含人工智能策劃的課程建議- 社會(huì)證明(頭像、徽章、朋友活動(dòng))- 添加“社區(qū)”選項(xiàng)卡,用于同行共享內(nèi)容
結(jié)果如下:
再次,我對(duì) GPT-4o 圖像生成能力的提升感到震驚。
雖然這三個(gè)選項(xiàng)看起來(lái)仍然非常相似,但如果仔細(xì)觀察,就會(huì)發(fā)現(xiàn)一些小細(xì)節(jié) - 例如“搜索”圖標(biāo)、社交證明和副本 - 試圖使每個(gè)版本都與其他版本區(qū)分開(kāi)來(lái)。
不過(guò),結(jié)果肯定還有改進(jìn)的空間。例如,由于一張圖片中包含了大量信息,ChatGPT 的精度開(kāi)始下降。你可能會(huì)注意到,部分文本變得無(wú)法識(shí)別/扭曲。
接下來(lái),作為一個(gè)有趣的測(cè)試,我使用Codia AI 的插件根據(jù) ChatGPT 生成的視覺(jué)模型生成 Figma 設(shè)計(jì)。
所有組件(包括文本)都可以在 Figma 中編輯。
它使用的字體系列是 Intel。
好得可怕。
如果我想進(jìn)行更改,這使我能夠自定義 UI 模型。
ChatGPT 生成 UI 視覺(jué)模型的能力是一個(gè)巨大的提升。與之前版本相比,它提供了更高的精度和對(duì)提示的遵循性。
話雖如此,速度還是有點(diǎn)慢,準(zhǔn)確率還有待提高。有時(shí)圖像生成到一半就停止了;有時(shí)結(jié)果很隨機(jī),而且與指令不完全一致。
當(dāng)我要求 ChatGPT 根據(jù)設(shè)計(jì)選項(xiàng)創(chuàng)建 3D 模型時(shí),事情變得有點(diǎn)扭曲和奇怪——但還不算太糟。
不管怎樣,這已經(jīng)是一次很棒的升級(jí)了。我現(xiàn)在能生成以前無(wú)法生成的東西了。
這一切都在 ChatGPT 聊天窗口內(nèi)完成。多么方便???
我非常興奮并希望未來(lái)會(huì)有更好的升級(jí)。
大腦在處理和組織看到的信息時(shí)會(huì)使用一套快捷方法,了解這些方法是設(shè)計(jì)成功的關(guān)鍵要素。本文介紹了十一條有效的設(shè)計(jì)準(zhǔn)則,用形象的圖解幫助讀者更好地理解設(shè)計(jì)準(zhǔn)則在設(shè)計(jì)工作中的運(yùn)用,幫助你利用這些方法更快捷地開(kāi)展設(shè)計(jì)。適合關(guān)注產(chǎn)品設(shè)計(jì)的小伙伴閱讀。
感知力是大腦將不同的信息連接和組織成一個(gè)連貫整體的機(jī)制。例如我們將相似的對(duì)象分組并連接起來(lái),能夠輕松地區(qū)分出不屬于該組的對(duì)象。
大腦在處理和組織看到的信息時(shí)會(huì)使用一套快捷方法,了解這些方法是設(shè)計(jì)成功的關(guān)鍵要素。
在UI設(shè)計(jì)時(shí),我們應(yīng)該有意識(shí)地運(yùn)用感知力,用足夠的事實(shí)來(lái)驗(yàn)證設(shè)計(jì),有依有據(jù)地解釋為什么這個(gè)圖形元素要這樣設(shè)計(jì)?背后的原因是什么?
提升感知力有助于清晰地解釋設(shè)計(jì)方案,避免常見(jiàn)的設(shè)計(jì)錯(cuò)誤,引導(dǎo)我們將設(shè)計(jì)做得更好、更容易理解!
彼此靠近的元素會(huì)被自動(dòng)理解為一組。把它們的位置放得更遠(yuǎn),會(huì)給人一種這些元素是完全獨(dú)立的個(gè)體的印象。
在UI設(shè)計(jì)中,可以利用鄰近原則將相似的界面元素組合在一起,把控總體布局。
鄰近規(guī)則適用于主導(dǎo)航、卡片、按鈕、內(nèi)容和圖標(biāo)等。我們還可以使用適當(dāng)?shù)牧舭讓⒉煌脑剡M(jìn)一步分開(kāi),創(chuàng)建一個(gè)層級(jí)更清晰的界面結(jié)構(gòu),以此來(lái)幫助用戶瀏覽和理解不同類型的信息。
鄰近原則是直接影響界面可用性的基本規(guī)則之一。如果隨意控制元素的位置和間距,有可能會(huì)讓整個(gè)產(chǎn)品變得混亂和難以理解。
視覺(jué)上相似的元素會(huì)被視為同一組,視覺(jué)上不同的元素,大腦會(huì)下意識(shí)將其視為單獨(dú)的元素。
利用相似性可以來(lái)定義界面的特征,例如顏色、形狀、尺寸、紋理或空間位置等。最容易區(qū)分的是顏色相似,其次是尺寸和形狀相似。
如果一個(gè)元素和界面中其他的元素都不同,無(wú)法融入到其他元素組中,那么這個(gè)元素就會(huì)變得非常顯眼。
我們可以利用這種差異化的效果來(lái)突出一些具有引導(dǎo)性或者功能性的元素,例如登錄按鈕或者加入購(gòu)物車按鈕等。
一組不相連的元素組合在一起,我們會(huì)下意識(shí)地自動(dòng)補(bǔ)充這些元素之間的空白,得到一個(gè)完整的、可識(shí)別的形狀。
閉合原則有多種不同的用法。例如一個(gè)虛線箭頭,我們會(huì)填補(bǔ)空白并把這些點(diǎn)連接在一起,得到一條完整的線段。
閉合原則還有助于識(shí)別抽象的圖標(biāo)形狀并賦予更多的含義。在圖標(biāo)設(shè)計(jì)中,為了避免信息過(guò)載,大多數(shù)圖標(biāo)的設(shè)計(jì)都很簡(jiǎn)潔,更方便用戶理解。
運(yùn)用閉合原則的經(jīng)典案例包括用不同虛線構(gòu)成的IBM標(biāo)志、利用正負(fù)形空間組合而成的WWF熊貓標(biāo)志。
UI界面中的元素一旦有對(duì)稱性,就會(huì)產(chǎn)生秩序感,我們很快就能看到并理解這種形式。
我們天生喜歡對(duì)稱的物體。對(duì)稱排列的元素在視覺(jué)上更令人舒服,也更美觀。
可能有人覺(jué)得對(duì)稱設(shè)計(jì)過(guò)于呆板,這種想法在平面廣告或視覺(jué)設(shè)計(jì)中可能正確,但在UI設(shè)計(jì)中對(duì)稱布局是相當(dāng)重要且實(shí)用的界面排版形式。
對(duì)稱布局讓設(shè)計(jì)更容易理解,也更友好,缺乏對(duì)稱會(huì)導(dǎo)致界面混亂,不知道該關(guān)注哪個(gè)元素。當(dāng)然,如果想讓某個(gè)模塊突出展示,也可以嘗試打破對(duì)稱性,這樣不對(duì)稱的元素就能在界面中脫穎而出。
界面中沿著同一條線對(duì)齊的元素會(huì)被認(rèn)為屬于同一組。
在瀏覽界面時(shí),視線會(huì)第一時(shí)間尋找最順暢的視覺(jué)動(dòng)線。這也解釋了為什么在使用連續(xù)性原則時(shí),需要確保直線(或曲線)是均勻和可預(yù)測(cè)的。
線條越均勻,生成的形狀越容易被用戶正確識(shí)別。
連續(xù)性有助于界面保持上下垂直滾動(dòng)時(shí)的節(jié)奏,相似的內(nèi)容應(yīng)始終保持對(duì)齊。如果某個(gè)元素打破了這種連續(xù)性,我們的瀏覽節(jié)奏會(huì)被打亂,瀏覽速度也會(huì)變慢。
當(dāng)下的UI設(shè)計(jì)中,流行帶有圓角的卡片和按鈕效果。其中的一個(gè)原因是我們對(duì)于直角的處理速度稍慢,視線需要停頓并旋轉(zhuǎn)90度,而更圓滑的導(dǎo)角效果能幫助我們的視線更快地轉(zhuǎn)換。
按相同方向、以相同速度運(yùn)動(dòng)的元素被認(rèn)為是一組。
在設(shè)計(jì)輪播、下拉列表、過(guò)渡動(dòng)畫等場(chǎng)景時(shí),共同命運(yùn)原則會(huì)很有幫助。例如我們的視線既跟隨輪播圖水平移動(dòng),還跟隨下拉列表向下展開(kāi)。
根據(jù)希克定律,可供的選擇數(shù)量應(yīng)該有限制。有太多東西可供選擇可能會(huì)導(dǎo)致用戶迷失方向,做出判斷的時(shí)間加長(zhǎng),甚至?xí)械綁毫Α?/p>
米勒定律提到,大腦處理信息的能力與認(rèn)知負(fù)荷有直接的關(guān)系。我們大腦一次能處理的信息量大約是7個(gè)對(duì)象。對(duì)象數(shù)量越多,處理它們所需的時(shí)間就越長(zhǎng)。
在設(shè)計(jì)時(shí),盡量不要超過(guò)七個(gè)選項(xiàng),為了獲得最好的體驗(yàn),應(yīng)盡量將選項(xiàng)保持在4-5個(gè)。這意味著需要控制主導(dǎo)航數(shù)量、按鈕數(shù)量、下拉選項(xiàng)和輪播圖數(shù)量等。
當(dāng)需要用戶做選擇時(shí),最好能突出顯示最受歡迎或最推薦的選項(xiàng),幫助用戶更快做出決策。
我們能夠本能地區(qū)分界面中的圖形元素和背景。
界面由不同類型和樣式的圖層組成,每個(gè)圖層都有不同的層次結(jié)構(gòu)。
為了避免層次結(jié)構(gòu)混淆,我們需要清楚地定義界面的所有元素。背景不需要設(shè)計(jì)設(shè)計(jì)的太花哨,有可能會(huì)搶奪用戶對(duì)主要內(nèi)容的注意力。
輔助內(nèi)容和功能不需要太明顯,并且需要與主要內(nèi)容在設(shè)計(jì)上做出區(qū)分。
可以使用對(duì)比關(guān)系、位置關(guān)系和陰影等方法幫助用戶區(qū)分內(nèi)容和背景。
用戶通常認(rèn)為具有視覺(jué)吸引力(美觀)的產(chǎn)品更實(shí)用。
根據(jù)這個(gè)原則,流行、對(duì)稱、美觀的界面會(huì)對(duì)用戶產(chǎn)生更積極的影響。如果視覺(jué)效果給人足夠好的第一印象,用戶可能會(huì)忽略一些可用性問(wèn)題。
審美可用性的基礎(chǔ)在于具有一定的可用性,之后才會(huì)起作用。如果產(chǎn)品本身的功能就很糟糕,那么再美觀的界面也無(wú)濟(jì)于事。
高質(zhì)量、美觀的界面有助于建立用戶信任。相反一個(gè)看起來(lái)混亂的設(shè)計(jì)會(huì)讓用戶感到不靠譜。即使用戶不能確切說(shuō)出界面視覺(jué)的問(wèn)題,但他們也會(huì)覺(jué)得這個(gè)產(chǎn)品有風(fēng)險(xiǎn)或者不正規(guī)。
高質(zhì)量的UI設(shè)計(jì)對(duì)于銀行類、金融類和醫(yī)療類產(chǎn)品來(lái)說(shuō)尤為重要,尤其是在需要用戶提供個(gè)人信息或涉及交易的使用場(chǎng)景中。
我們最容易記住一組當(dāng)中的第一個(gè)和最后一個(gè)元素。
將最重要的內(nèi)容或元素放在每組的第一個(gè)或最后一個(gè),吸引用戶注意力,方便高頻操作。而次要的內(nèi)容操作頻率相對(duì)較低,則放到中間位置。
例如在構(gòu)建導(dǎo)航、下拉列表等場(chǎng)景中,將重要的操作放到首位。
在一組看起來(lái)相似的元素中,我們總是會(huì)記住與其余元素不匹配的那個(gè)元素。
在UI設(shè)計(jì)中,隔離效應(yīng)意味著將界面中重要的內(nèi)容或關(guān)鍵的操作在視覺(jué)上與眾不同。
最典型案例是界面中的CTA(號(hào)召性用語(yǔ))按鈕。通過(guò)改變CTA按鈕的顏色、尺寸等,與界面中的其他按鈕區(qū)分開(kāi)來(lái),第一時(shí)間引起用戶的注意。
專欄作家
作者:Clippp,每周精選設(shè)計(jì)文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
這次全面的改版,針對(duì)UI與UE不統(tǒng)一的問(wèn)題,邁出了關(guān)鍵的一步——首次構(gòu)建組件庫(kù)
盡管在初期階段,面臨諸多挑戰(zhàn)和困難,但堅(jiān)持不懈的努力使得組件庫(kù)逐漸成形。組件庫(kù)基本完善后,對(duì)工作效率的提升效果簡(jiǎn)直令人興奮。組件的靈活變體和自動(dòng)化的布局功能,不僅極大地提升了設(shè)計(jì)效率,也確保了界面的一致性和用戶體驗(yàn)的連貫性。這一嘗試不僅解決了我們面臨的問(wèn)題,更為未來(lái)的設(shè)計(jì)和開(kāi)發(fā)工作奠定了堅(jiān)實(shí)的基礎(chǔ),期待未來(lái)更多的挑戰(zhàn)與進(jìn)步。
判斷 UI 設(shè)計(jì)公司的收費(fèi)是否合理,可以從以下多個(gè)方面著手:
考量設(shè)計(jì)公司的專業(yè)水平與資質(zhì)
團(tuán)隊(duì)專業(yè)背景:查看設(shè)計(jì)團(tuán)隊(duì)成員的學(xué)歷、畢業(yè)院校以及所學(xué)專業(yè)等情況,若團(tuán)隊(duì)成員大多來(lái)自知名設(shè)計(jì)院校,具備扎實(shí)的專業(yè)基礎(chǔ),例如有專業(yè)的視覺(jué)傳達(dá)、交互設(shè)計(jì)等相關(guān)專業(yè)背景,往往意味著能產(chǎn)出高質(zhì)量的設(shè)計(jì)成果,相應(yīng)收費(fèi)可能會(huì)偏高,但也更具合理性。
行業(yè)經(jīng)驗(yàn):了解其在 UI 設(shè)計(jì)領(lǐng)域的從業(yè)年限以及過(guò)往參與過(guò)的項(xiàng)目類型和數(shù)量。有豐富行業(yè)經(jīng)驗(yàn)的公司,經(jīng)歷過(guò)各種不同客戶需求和復(fù)雜項(xiàng)目的打磨,在處理問(wèn)題、把握設(shè)計(jì)方向上更有優(yōu)勢(shì),對(duì)于復(fù)雜項(xiàng)目合理收取較高費(fèi)用是正常的,比如長(zhǎng)期服務(wù)大型企業(yè)、完成過(guò)多個(gè)行業(yè)標(biāo)桿性 UI 設(shè)計(jì)項(xiàng)目的公司,其報(bào)價(jià)高些可能是基于深厚的實(shí)踐積累。
所獲榮譽(yù)與資質(zhì)認(rèn)證:關(guān)注該公司是否獲得過(guò)一些權(quán)威的 UI 設(shè)計(jì)相關(guān)獎(jiǎng)項(xiàng),或者具備如紅點(diǎn)獎(jiǎng)等。這些榮譽(yù)和認(rèn)證是對(duì)其設(shè)計(jì)實(shí)力與服務(wù)質(zhì)量的一種認(rèn)可,收費(fèi)相對(duì)高些如果匹配其專業(yè)形象,也是合理的體現(xiàn)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.fazhicankao.cn