產(chǎn)品定位
為提供高精度的刻蝕解決方案，適用于多個(gè)行業(yè)和領(lǐng)域，如半導(dǎo)體、光電子、生物醫(yī)學(xué)等?？梢詽M足不同行業(yè)的刻蝕需求，并提供相應(yīng)的定制化功能和參數(shù)設(shè)置。
北方華創(chuàng)致力于加快推進(jìn)北方華創(chuàng)向新型制造業(yè)的戰(zhàn)略轉(zhuǎn)型；致力于成為半導(dǎo)體基礎(chǔ)產(chǎn)品領(lǐng)域值得信賴的引領(lǐng)者；致力于提升人類智能生活品質(zhì)；致力于實(shí)現(xiàn)中國(guó)“智造強(qiáng)國(guó)”的夢(mèng)想藍(lán)圖。未來的北方華創(chuàng)，將以半導(dǎo)體基礎(chǔ)產(chǎn)品領(lǐng)域先進(jìn)企業(yè)的姿態(tài)登上世界舞臺(tái)，深耕發(fā)展，引領(lǐng)未來，堅(jiān)持以客戶為中心，以價(jià)值創(chuàng)造者為本，持續(xù)創(chuàng)新，推動(dòng)產(chǎn)業(yè)進(jìn)步，創(chuàng)造無限可能。
北方華創(chuàng)委托藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé)一款工業(yè)刻蝕軟件的界面視覺設(shè)計(jì)和wpf前端開發(fā)。藍(lán)藍(lán)設(shè)計(jì)人員通過前期詳細(xì)溝通，參考大量相關(guān)競(jìng)品。在設(shè)計(jì)過程中雙方保持高效溝通，整個(gè)軟件有50頁左右，采用分批設(shè)計(jì)的模式，在設(shè)計(jì)過程我們還對(duì)過程版本進(jìn)行保留，不斷推敲打磨最后確定一個(gè)最優(yōu)方案。開發(fā)過程中我們也運(yùn)用到了控件的WPF定制開發(fā)。好的產(chǎn)品是需要雙方建立同理心的基礎(chǔ)上共同創(chuàng)作出來的。
目標(biāo)用戶
刻蝕軟件的主要用戶是各類制造業(yè)企業(yè)和研發(fā)機(jī)構(gòu)，包括半導(dǎo)體、電子器件、光電子器件、集成電路、微納加工等領(lǐng)域。需要進(jìn)行精確的刻蝕工藝來制造各類產(chǎn)品或開展研究，并能夠根據(jù)不同材料和需求進(jìn)行刻蝕工藝參數(shù)的優(yōu)化和調(diào)整。
設(shè)計(jì)風(fēng)格
界面整體采用藍(lán)和白兩個(gè)色系，頁面整體給人以干凈整潔的感覺，在設(shè)計(jì)過程中遵循“所見即所得”的設(shè)計(jì)原則，通過扁平的設(shè)計(jì)方式，將信息更扁平、直接地呈現(xiàn)在客戶面前。同時(shí)最大化地減少頁面層級(jí)，使用戶產(chǎn)生輕量化的使用感受。
項(xiàng)目背景
北方華創(chuàng)始終秉承“推動(dòng)產(chǎn)業(yè)進(jìn)步，創(chuàng)造無限可能”的企業(yè)使命，立足半導(dǎo)體基礎(chǔ)產(chǎn)品領(lǐng)域，深耕半導(dǎo)體裝備、真空及鋰電裝備和精密電子元器件等業(yè)務(wù)領(lǐng)域，產(chǎn)品廣泛應(yīng)用于集成電路、先進(jìn)封裝、半導(dǎo)體照明、第三代半導(dǎo)體、新能源光伏、新型顯示、真空熱處理、新能源鋰電等領(lǐng)域，致力于成為半導(dǎo)體基礎(chǔ)產(chǎn)品領(lǐng)域值得信賴的引領(lǐng)者。 現(xiàn)有設(shè)備控制平臺(tái)客戶端框架，已經(jīng)發(fā)布 10 余年，界面框架分發(fā)給不同產(chǎn)品系獨(dú)立維護(hù)，導(dǎo)致公司界面框架沒有形成統(tǒng)一風(fēng)格標(biāo)準(zhǔn)，很多控件被重復(fù)開發(fā)。隨著時(shí)間推移，華創(chuàng)客戶端應(yīng)用與現(xiàn)有其它公司產(chǎn)品相比，在 UI 渲染效果，用戶體驗(yàn)，客戶端應(yīng)用穩(wěn)定性等諸多方面都出現(xiàn)了明顯的技術(shù)差距和用戶體驗(yàn)差距，迫切需要在新一代控制平臺(tái)設(shè)計(jì)的初期，規(guī)范 UI 設(shè)計(jì)標(biāo)準(zhǔn)，向行業(yè)領(lǐng)先技術(shù)發(fā)展趨勢(shì)看齊。
痛點(diǎn)分析
-
復(fù)雜混亂的布局
布局混亂，導(dǎo)致用戶難以理解和找到所需功能,過多的窗口、菜單和選項(xiàng)可能會(huì)給用戶造成困惑，降低使用效率
-
缺乏一致性
功能模塊之間缺乏一致性，導(dǎo)致用戶需要重新適應(yīng)每個(gè)模塊的界面和操作方式。增加學(xué)習(xí)成本和誤操作的風(fēng)險(xiǎn)。
-
交互不合理
操作流程繁瑣、重復(fù)性操作過多、輸入數(shù)據(jù)要求不清晰等，這些都會(huì)增加用戶的工作負(fù)擔(dān)和錯(cuò)誤率。
-
缺乏美觀性
頁面風(fēng)格過于老舊，不符合現(xiàn)代用戶的審美和使用習(xí)慣，會(huì)給用戶造成不適和困惑。導(dǎo)致使用體驗(yàn)差。
-
重點(diǎn)功能不突出
不能直接讓用戶了解操作信息，可預(yù)知性較弱。降低用戶的使用效率，增加用戶使用軟件的難度和煩惱。
場(chǎng)景挑戰(zhàn)
復(fù)雜性：刻蝕軟件通常需要處理非常復(fù)雜的圖像和模型，因此軟件界面的設(shè)計(jì)需要能夠清晰展示所有相關(guān)信息，并讓用戶能夠快速、準(zhǔn)確地獲取需要的信息。這意味著需要設(shè)計(jì)出簡(jiǎn)單直觀、易于理解的界面，同時(shí)盡可能避免讓用戶感到不適或疲勞。
動(dòng)態(tài)性：刻蝕軟件在操作過程中可能會(huì)出現(xiàn)許多動(dòng)態(tài)變化，例如，加工進(jìn)度的實(shí)時(shí)更新、圖形模擬效果等等。這就要求軟件界面需要能夠快速響應(yīng)并展示這些動(dòng)態(tài)變化，同時(shí)保證界面的穩(wěn)定性和流暢性。
多平臺(tái)適配：刻蝕軟件在不同的平臺(tái)和設(shè)備上運(yùn)行時(shí)，需要保證用戶體驗(yàn)的一致性和穩(wěn)定性。因此，軟件界面設(shè)計(jì)需要考慮多個(gè)平臺(tái)上的不同分辨率、不同屏幕尺寸和不同操作系統(tǒng)的差異，并確保軟件能夠適配不同的設(shè)備。
方案價(jià)值
提升軟件的美觀性：美觀的軟件界面可以提供更愉悅的用戶體驗(yàn)。清晰、直觀的布局、合適的顏色搭配和美觀的圖標(biāo)可以幫助用戶更容易地理解和使用軟件，減少學(xué)習(xí)成本和操作困難，從而提高用戶滿意度。
提高用戶體驗(yàn)：通過提升用戶體驗(yàn)，用戶更容易學(xué)習(xí)和使用軟件，減少操作困難和學(xué)習(xí)成本。他們能夠更快速地完成任務(wù)，獲得預(yù)期的結(jié)果。這樣可以提高用戶的滿意度，使其更愿意長(zhǎng)期使用和推薦該軟件。
- 首頁機(jī)械工藝信息過多無法全部展示
- 菜單層級(jí)布局不太友好
- 圖形分析和數(shù)據(jù)分析沒進(jìn)行對(duì)比展示
- 機(jī)械工藝狀態(tài)不夠明顯
- 工藝流程動(dòng)畫數(shù)量不確定
- 表格種類過多，使用場(chǎng)景不明確
- wpf開發(fā)，多個(gè)控件需要自定義，實(shí)現(xiàn)困難
- 將不?？葱畔⑦M(jìn)行縮略展示，點(diǎn)擊查看詳情
- 設(shè)計(jì)多個(gè)版本，進(jìn)行分析，選擇最優(yōu)方案
- 增加表格和不同圖形切換展示
- 通過圖像和顏色結(jié)合形成統(tǒng)一規(guī)范
- 進(jìn)行定制化顯示，目前有的情景都進(jìn)行設(shè)計(jì)
- 進(jìn)行場(chǎng)景分類，規(guī)范表格樣式
- 實(shí)現(xiàn)定制化控件
-
頁面布局
進(jìn)行 UI 設(shè)計(jì)時(shí)需要充分考慮布局的合理化問題，
-
品牌一致
整體風(fēng)格以北方華創(chuàng)的品牌色藍(lán)色為主， 突出品牌性。
-
元素分布
通過界面元素布局，顏色，字體呈現(xiàn)給 用戶綜合體驗(yàn)。
-
控件規(guī)范
控件樣式，提示措辭、系統(tǒng)顏色、窗口 布局，要遵循統(tǒng)一的標(biāo)準(zhǔn)。
-
直觀展示
界面直觀、對(duì)用戶透明，無需過 多培訓(xùn)， 可直接使用系統(tǒng)。
-
便于操作
界面的設(shè)計(jì)滿足功能需求的同時(shí)，注重用 戶的使用習(xí)慣
設(shè)計(jì)原則和理念
過程稿
在設(shè)計(jì)初期我們從不同的風(fēng)格和布局考慮做了很多版本的設(shè)計(jì)，這是其中的三個(gè)方案。
方案一 界面在設(shè)計(jì)過程中遵循“少即是多”的設(shè)計(jì)原則，盡量刪除用戶操作時(shí)不必要的內(nèi)容，以實(shí)現(xiàn)接口界面的單純化。不使用其他紋理，模塊僅以色塊/大間距/分割線進(jìn)行區(qū)分，保證界面的干凈整潔。
方案二 頁面整體采用藍(lán)綠色，用戶使用軟件的場(chǎng)景一般是出故障時(shí)，而藍(lán)綠色可以緩解用戶焦躁煩悶的情緒。頁面加入透視感背景圖，內(nèi)容區(qū)以半透明狀透出背景使頁面顯得更有空間感。
方案三 頁面整體加入光線，線條，炫酷背景等科技風(fēng)的元素，使頁面看起來復(fù)雜精密，具有科技感。深色的配色可以讓用戶獲得更沉浸的體驗(yàn)，集中用戶的注意力不容易被其他元素干擾，提高用戶的辦公效率。
方案亮點(diǎn)
盒子思維
充分利用盒子思維，通過建立區(qū)域在盒子中的準(zhǔn)確元素定位，將頁面進(jìn)行組件化設(shè)計(jì)，既減少了設(shè)計(jì)過程中的標(biāo)注誤差，也方便后期開發(fā)有效還原設(shè)計(jì)稿。
機(jī)械手不同狀態(tài)繪制
右邊是工作流程中的機(jī)械臂，機(jī)械臂設(shè)計(jì)了不同的臂狀態(tài)，以便用戶后期進(jìn)行替換和復(fù)用，整個(gè)設(shè)計(jì)風(fēng)格也迭代了好幾版，風(fēng)格需要和界面保持統(tǒng)一，同時(shí)還需要體現(xiàn)工業(yè)風(fēng)的特點(diǎn)和機(jī)械臂金屬材質(zhì)的堅(jiān)硬特點(diǎn)。
版本迭代
下圖機(jī)械臂操作過程圖的迭代版本的一個(gè)過程，整個(gè)軟件在設(shè)計(jì)過程中，很多細(xì)節(jié)都是通過不斷推敲，版本對(duì)比，最終得出最優(yōu)方案。在主要界面的設(shè)計(jì)工作中，雙方在三個(gè)月期間基本上每晚8-10點(diǎn)討論2個(gè)小時(shí)，白天工作，晚上溝通。
機(jī)械手不同狀態(tài)繪制
右邊是工作流程中的機(jī)械臂，機(jī)械臂設(shè)計(jì)了不同的臂狀態(tài)，以便用戶后期 進(jìn)行替換和復(fù)用，整個(gè)設(shè)計(jì)風(fēng)格也迭代了好幾版，風(fēng)格需要和界面保持統(tǒng) 一，同時(shí)還需要體現(xiàn)工業(yè)風(fēng)的特點(diǎn)和機(jī)械臂金屬材質(zhì)的堅(jiān)硬特點(diǎn)。
設(shè)計(jì)體系UI規(guī)范的建立
設(shè)計(jì)完成后我們還制定了統(tǒng)一的設(shè)計(jì)體系規(guī)范，UI規(guī)范不僅可以幫助開發(fā)人員更好的的還原設(shè)計(jì)圖樣式，還便于用戶在同一系列的其它產(chǎn)品線上應(yīng)用。 結(jié)合實(shí)際業(yè)務(wù)場(chǎng)景和原子設(shè)計(jì)理論，將組件劃分為不同顆粒度：基礎(chǔ)組件、業(yè)務(wù)組件、典型頁面組件，以適用于不同研發(fā)場(chǎng)景使用。梳理具有業(yè)務(wù)特點(diǎn)的典型頁面，相比基礎(chǔ)組件和業(yè)務(wù)組件，典型頁面更加具體，為用戶提供具有代表性的內(nèi)容和框架，并準(zhǔn)確描述用戶最終看到的內(nèi)容。如列表和左樹右表典型頁面組件，作為最為常見的頁面結(jié)構(gòu)，各業(yè)務(wù)場(chǎng)景可復(fù)用頁面組件，保證了頁面組件內(nèi)各基礎(chǔ)組件的一致性，最大程度的實(shí)現(xiàn)不同的產(chǎn)品線產(chǎn)品中頁面體驗(yàn)的一致性。
設(shè)計(jì)作品物流信息化設(shè)計(jì)
設(shè)計(jì)作品應(yīng)急大屏設(shè)計(jì)
數(shù)慧時(shí)空國(guó)土資源數(shù)據(jù)中心一張圖平臺(tái)PC端界面設(shè)計(jì)
設(shè)計(jì)作品應(yīng)急大屏設(shè)計(jì)
設(shè)計(jì)作品應(yīng)急大屏設(shè)計(jì)
設(shè)計(jì)作品大屏設(shè)計(jì)
