01 จาก 09
เริ่มต้นด้วย UXPin อย่างไร
ขณะที่เราย้ายเข้าไปอยู่ในขอบเขตของการออกแบบมือถือการออกแบบแอปและการออกแบบที่ตอบสนองต่อการใช้งานได้มีการเน้นที่ UX (User Experience) และ wireframing การสร้างแบบจำลองและแบบจำลองแบบโต้ตอบ มีเครื่องมือมากมายที่มุ่งเป้าไปที่โพรงนี้และใช้งานช่วงเต็มรูปแบบจากองค์ประกอบที่ซับซ้อนซึ่งมีลักษณะที่หนักแน่นและมีประโยชน์น้อยมาก หนึ่งในเครื่องมือที่จับตาของฉันคือ UXPin เพียงเพราะมันได้รับการพัฒนาโดยนักออกแบบสำหรับนักออกแบบ
ก่อนที่เราจะเดินหน้าต่อไป ... ข้อแม้ หากองค์กรของคุณเป็นองค์กรที่ต้องการเป็นเจ้าของซอฟต์แวร์ UXPin ไม่ใช่ของคุณ งานทั้งหมดที่ทำในแอปนี้ทำในเบราว์เซอร์และโครงการที่คุณบันทึกจะถูกบันทึกลงในบัญชีของคุณ
ในการเริ่มต้นใช้ UXPin คุณเปิดเบราเซอร์และไปที่ UXPin จากที่นี่คุณสามารถลงทะเบียนทดลองใช้ฟรีหรือจัดทำแผนรายเดือนตามความต้องการที่คุณคาดหมายไว้ กระบวนการลงชื่อสมัครใช้เป็นเรื่องง่ายมากและเมื่อคุณตั้งชื่อผู้ใช้และรหัสผ่านแล้วคุณก็พร้อมที่จะเริ่มใช้งาน
02 จาก 09
วิธีการเริ่มโครงการใน UXPin
เมื่อคุณเข้าสู่ระบบคุณมาถึงหน้าแดชบอร์ดและจากที่นี่คุณสามารถตัดสินใจสร้างโครงร่างใหม่โครงการโทรศัพท์มือถือใหม่หรือโครงการ Responsive Web Design นอกจากนี้ยังมีปลั๊กอินสำหรับ UXPin ที่จะช่วยให้คุณสามารถนำโครงการ Photoshop หรือ Sketch ของคุณไปใช้ได้ สำหรับวิธีนี้ฉันจะสร้างแบนเนอร์พร้อมข้อความและเพิ่มปุ่มอีเมลไปที่แบนเนอร์ เพื่อให้บรรลุเป้าหมายนี้ฉันได้เลือกสร้างโครงร่างใหม่
03 จาก 09
วิธีการใช้อินเตอร์เฟซ UXPin
พื้นผิวการออกแบบแบ่งออกเป็นสี่ส่วน ในพื้นที่สีดำด้านซ้ายเป็นชุดเครื่องมือที่ช่วยให้คุณสามารถกลับไปที่แดชบอร์ดให้เปิดองค์ประกอบที่คุณจะใช้เปิดแผง Smart Elements ค้นหาองค์ประกอบเพิ่มบันทึกย่อลงในเพจและเพิ่มสมาชิกในทีม ที่ด้านล่างคือปุ่มที่เปิดบทแนะนำสั้น ๆ ซึ่งจะช่วยให้คุณสามารถเข้าถึงบัญชีของคุณและอีกบัญชีหนึ่งที่เข้าถึงคำถามที่พบบ่อยให้คุณถามคำถามและให้ข้อเสนอแนะ
ในพื้นที่สีฟ้าด้านบนเป็นชุดเครื่องมือและสมบัติ ปุ่มสีเข้มที่ด้านขวาช่วยให้คุณสามารถย้ำการออกแบบปรับการตั้งค่าโครงการแบ่งปันหน้าเว็บและทำแบบจำลองของเบราว์เซอร์ในหน้า
แผงองค์ประกอบคือตำแหน่งที่คุณคว้าบิตและชิ้นสำหรับพื้นผิวดีไซน์ชื่อโครงการของคุณและเพิ่มหรือนำหน้าออก
ไลบรารี Elements เป็นเรื่องน่าแปลกใจสำหรับนักออกแบบ UX ป๊อปอัปนี้ช่วยให้คุณเลือกจากห้องสมุด anon 30 ตั้งแต่ iOS ไปจนถึง Android Lolipop รวมทั้งคุณสามารถเข้าถึงองค์ประกอบ Bootstrap และ Foundation พร้อมด้วยไอคอนแบบอักษรที่น่าสนใจไอคอนท่าทางมือถือและชุดวิดเจ็ตทางสังคม
04 จาก 09
วิธีการเพิ่มองค์ประกอบลงในหน้า UXPin
ในการเริ่มต้นใช้งานฉันลากส่วน Box ไปที่พื้นผิวการออกแบบและเมื่อฉันปล่อยเมาส์ แผงคุณสมบัติจะ เปิดขึ้น ปุ่มคุณสมบัติช่วยให้คุณตั้งชื่อองค์ประกอบและตั้งค่าความสูงความสูงและค่าตำแหน่งขององค์ประกอบ นอกจากนี้คุณยังสามารถเพิ่ม padding ไปยังองค์ประกอบล้อมรอบมุมและปรับความทึบ คลิกปุ่มพื้นหลังจะเปิดตัวเลือกสี RGBA
นอกจากนี้คุณยังสามารถกำหนดแบบอักษรเส้นขอบและรูปแบบให้กับองค์ประกอบที่เลือก Lightning Bolt ช่วยให้คุณสามารถเพิ่มการโต้ตอบกับองค์ประกอบที่เลือกได้
05 จาก 09
วิธีการเพิ่มและจัดรูปแบบข้อความใน UXPin
หากต้องการเพิ่มข้อความให้ลากองค์ประกอบข้อความไปยังพื้นผิวการออกแบบและป้อนข้อความของคุณ คลิกที่ปุ่ม Text Property เพื่อเปิดคุณสมบัติ Font และจัดรูปแบบข้อความของคุณ หากต้องการบล็อกข้อความปลอมให้เพิ่มองค์ประกอบข้อความและคลิกปุ่ม GENERATE LOREM IPSUM ในคุณสมบัติแบบอักษร
06 จาก 09
วิธีการเพิ่มภาพลงในหน้า UXPin
มีสองวิธีในการบรรลุผลงานนี้ คุณสามารถใช้ เครื่องมือรูปภาพ ในแถบเครื่องมือเพิ่มอิลิเมนต์รูปภาพจากไลบรารีหรือลากและวางภาพจากเดสก์ท็อปของคุณไปยังองค์ประกอบบนพื้นผิวการออกแบบดังที่แสดงไว้ด้านบน
07 จาก 09
วิธีการเพิ่มปุ่มลงในหน้า UXPin
แม้ว่าจะมีองค์ประกอบของปุ่มไว้ให้ป้อน " ปุ่ม " ลงในพื้นที่ ค้นหา ดังที่แสดงไว้ด้านบนจะเปิดขึ้นทุกปุ่มที่พบในไลบรารีทั้งหมด ลากส่วนที่เหมาะกับคุณไปยังพื้นผิวการออกแบบและใช้คุณสมบัติเพื่อเปลี่ยนสีแบบอักษรและแม้แต่รัศมีเส้นขอบ หากต้องการเปลี่ยนข้อความภายในปุ่มให้คลิกหนึ่งครั้งในข้อความและป้อนข้อความใหม่
08 จาก 09
วิธีการเพิ่มการโต้ตอบกับหน้า UXPin
นี่ไม่ซับซ้อนเท่าที่อาจปรากฏครั้งแรก สำหรับอินพุตอีเมลฉันเพิ่มองค์ประกอบป้อนข้อมูลปรับขนาดข้อความป้อนข้อความและจัดรูปแบบข้อความ เมื่อเลือกอิลิเมนต์อินพุทให้ คลิกปุ่มคุณสมบัติ และเมื่อ พร็อพเพอร์ตี้ องค์ประกอบ ปรากฏขึ้นให้คลิกที่ปุ่ม มองเห็น - ลูกตา - ที่มุมบนขวาของแผง
เลือกปุ่มและคลิก ปุ่มปฏิสัมพันธ์ - Lightning Bolt- ในคุณสมบัติ เมื่อแผงการโต้ตอบเปิดขึ้นให้เลือกการโต้ตอบใหม่ เลือกคลิกจากป๊อปอัพที่ทริกเกอร์ ในบริเวณ Action ให้เลือก Show Element ตอนนี้คุณจะถูกถามว่า Element จะแสดงอะไร คลิกหนึ่งครั้งที่ gunsite และคลิกที่ Input element ด้วยการระบุองค์ประกอบแล้วคุณสามารถกำหนดได้ว่าจะทำให้องค์ประกอบเคลื่อนไหวหรือไม่ ในกรณีนี้ฉันตัดสินใจที่จะแสดงช่องป้อนข้อมูลด้วยความสะดวกและใช้ค่าความยาวเริ่มต้น 300ms
ฉันยังต้องการให้ปุ่มเลื่อนประมาณ 65 พิกเซลไปทางขวาเมื่อมีการคลิก ฉันเลือกปุ่มเปิดแผงการโต้ตอบและการ โต้ตอบใหม่ที่ เลือกไว้ ฉันใช้การตั้งค่าเหล่านี้:
- ทริกเกอร์ : คลิก
- การดำเนินการ: ย้ายโดย
- ทิศทางการย้าย : 65 px บนแกน x
- แอนิเมชัน : เชิงเส้น
- ระยะเวลา: 300 ms
หากต้องการลบการโต้ตอบเลือกองค์ประกอบและเปิดแผงการโต้ตอบ เลือกการโต้ตอบในแผงควบคุมและคลิกถังขยะเพื่อลบทิ้ง
09 จาก 09
วิธีการทดสอบหน้าของคุณใน UXPin
เนื่องจากคุณกำลังทำงานในเบราว์เซอร์การทดสอบจึงทำได้ง่าย คลิกที่ปุ่ม จำลองการออกแบบ หน้านี้จะเปิดในเบราเซอร์และคุณสามารถทดสอบได้ นอกจากนี้ยังมีแผงควบคุมเพิ่มที่ด้านซ้ายของหน้าซึ่งจะอนุญาตให้แสดงความคิดเห็นแผนผังไซต์หากมีหลายหน้าการทดสอบการใช้งานการแชร์แบบสดการแก้ไขและการกลับไปที่แดชบอร์ด
ที่ด้านล่างของหน้าเป็นอีกแผงเล็ก ๆ ที่ช่วยให้คุณสามารถแสดงองค์ประกอบ Interactive แสดงหรือซ่อนความคิดเห็นและแบ่งปันลิงก์โครงการกับผู้อื่นได้