কিভাবে UXPin দিয়ে শুরু করতে হবে - টিউটোরিয়াল

09 এর 01

কিভাবে UXPin দিয়ে নিজেকে শুরু করতে হবে

আমরা মোবাইল ডিজাইন, অ্যাপ ডিজাইন এবং প্রতিক্রিয়াশীল ডিজাইনের ক্ষেত্রে প্রবেশ করার সময় ইউএক্স (ইউজার অভিজ্ঞতা) এবং ওয়্যারফ্রামিং, ইন্টারেক্টিভ প্রোটোটাইপিং এবং মকআপগুলিতে ক্রমবর্ধমান ফোকাস হয়েছে। সেখানে এই টুকরো টুকরো টুকরো টন সরঞ্জাম রয়েছে এবং তারা জটিল থেকে সম্পূর্ণ গামছা চালাচ্ছে, বৈশিষ্ট্যযুক্ত লোহা বেহেমোথগুলি স্পার এবং কদাচিৎ উপযোগী। আমার চোখে ধরা যে সরঞ্জামগুলির মধ্যে একটি হল কেবল ডিজাইনারদের জন্য ডিজাইনারদের দ্বারা তৈরি করা হয়েছে কারণ এটি কেবলমাত্র ইউএক্সপিন।

আগে আমরা এগিয়ে যান … একটি সতর্কবাণী। যদি আপনার প্রতিষ্ঠানটি এমন একটি সংস্থা যা সফটওয়্যারটির মালিক হওয়ার জন্য পছন্দ করে তবে UXPin আপনার জন্য নয়। এই অ্যাপে করা সমস্ত কাজ ব্রাউজারে সম্পন্ন করা হয় এবং আপনি যে প্রকল্পগুলি সংরক্ষণ করেন সেগুলি আপনার অ্যাকাউন্টে সংরক্ষিত হয়।

UXPin দিয়ে শুরু করতে আপনি একটি ব্রাউজার চালু করুন এবং UXPin এ মাথা। এখান থেকে আপনি বিনামূল্যে ট্রায়ালের জন্য সাইন আপ করতে পারেন অথবা আপনার প্রত্যাশিত প্রয়োজনের উপর ভিত্তি করে মাসিক পরিকল্পনাটি পরিচালনা করতে পারেন। সাইন আপ প্রক্রিয়াটি বেশ সহজ এবং আপনার ব্যবহারকারীর নাম এবং পাসওয়ার্ড সেট করার পরে, আপনি শুরু করতে প্রস্তুত।

02 এর 02

UXPin এ একটি প্রকল্প কিভাবে শুরু করবেন

আপনি যখন লগ ইন করেন তখন ড্যাশবোর্ডে পৌঁছান এবং এখানে থেকে আপনি একটি নতুন ওয়্যারফ্রেম, একটি নতুন মোবাইল প্রকল্প বা একটি প্রতিক্রিয়াশীল ওয়েব ডিজাইন প্রকল্প তৈরি করতে সিদ্ধান্ত নিতে পারেন। UXPin এর জন্য প্লাগ-ইন রয়েছে যা আপনাকে আপনার ফটোশপ বা স্কেচ প্রকল্পগুলিতে আনতে দেবে। এই জন্য আমি কিভাবে কিছু পাঠ্য দিয়ে ব্যানার তৈরি করতে এবং ব্যানারে একটি ইমেল বোতাম যোগ করতে যাচ্ছি। এটি সম্পন্ন করতে আমি একটি নতুন ওয়্যারফ্রেম তৈরি নির্বাচন করেছি।

03 এর 03

কিভাবে UXPin ইন্টারফেস ব্যবহার করবেন

ডিজাইন সারফেস চারটি ভাগে বিভক্ত করা হয়। বাম দিকের কালো এলাকায় সরঞ্জামগুলির একটি সিরিজ যা আপনাকে ড্যাশবোর্ডে ফিরে আসতে দেয়, আপনি যে উপাদানটি ব্যবহার করবেন তা খুলুন, স্মার্ট এলিমেন্ট প্যানেল খুলুন, উপাদানগুলির জন্য অনুসন্ধান করুন, পৃষ্ঠায় নোট যুক্ত করুন এবং টিমের সদস্যদের যোগ করুন। নিচের দিকে একটি বোতাম যা একটি ছোট টিউটোরিয়াল খোলে, অন্য যেটি আপনাকে আপনার অ্যাকাউন্ট অ্যাক্সেস করতে এবং প্রায়শই জিজ্ঞাসিত প্রশ্নাবলীর অ্যাক্সেস করতে দেয়, তাহলে আপনি প্রশ্ন জিজ্ঞাসা করুন এবং এমনকি প্রতিক্রিয়া জানান।

উপরে বরাবর নীল এলাকায় সরঞ্জাম এবং বৈশিষ্ট্য একটি সিরিজ। ডানদিকের গাঢ় বোতামগুলি আপনাকে আপনার নকশা পুনরাবৃত্তি করতে, প্রকল্প সেটিংস সামঞ্জস্য করতে, পৃষ্ঠাটি ভাগ করতে এবং পৃষ্ঠার একটি ইন-ব্রাউজার সিমুলেশন করতে দেয়।

এ্যালিমেন্টস প্যানেলে আপনি ডিজাইন সারফেসের জন্য বিট এবং টুকরা দখল করেন, আপনার প্রকল্পটি নাম দেন এবং পৃষ্ঠা যুক্ত বা অপসারণ করেন।

এলিমেন্ট লাইব্রেরি UX ডিজাইনারদের জন্য একটি চমৎকার অবাক। এই পপ ডাউনটি আপনাকে আইওএস থেকে অ্যান্ড্রয়েড ললিপপ পর্যন্ত আনয়ন 30 লাইব্রেরিগুলি থেকে চয়ন করতে দেয় যেমন আপনার কাছে ফন্ট অসম আইকন, মোবাইলের জন্য অঙ্গভঙ্গি আইকন এবং সামাজিক উইজেটগুলির সংগ্রহ সহ বুটস্ট্র্যাপ এবং ফাউন্ডেশন উপাদানের অ্যাক্সেস রয়েছে।

09 এর 04

একটি UXPin পৃষ্ঠায় একটি উপাদান যোগ করুন

শুরু করার জন্য আমি নকশা পৃষ্ঠায় বক্স উপাদানটি টেনে আনলাম এবং যখন আমি মাউস ছেড়ে দিয়েছিলাম, তখন বৈশিষ্ট্য প্যানেল প্রর্দশিত হবে। বৈশিষ্ট্যাবলী বোতামটি আপনাকে উপাদানটির নাম দেয় এবং উপাদানটির প্রস্থ উচ্চতা এবং অবস্থানের মানগুলি সেট করে। এছাড়াও আপনি উপাদান প্যাডিং যোগ করতে পারেন, কোণ বন্ধ বৃত্তাকার এবং তার অস্বচ্ছতা সামঞ্জস্য। পটভূমি রঙ বোতামে ক্লিক করলে একটি RGBA রঙের পিকার খোলে।

আপনি নির্বাচিত উপাদানতে একটি ফন্ট, সীমানা এবং প্যাটার্ন বরাদ্দ করতে পারেন। বাজ বোল্ট আপনি একটি নির্বাচিত উপাদান ইন্টারঅ্যাক্টিভিটি যোগ করার ক্ষমতা দেয়।

09 এর 05

কিভাবে UXPin এ যোগ এবং ফরম্যাট টেক্সট

পাঠ্য যুক্ত করতে, নকশা পৃষ্ঠায় পাঠ্য উপাদান টেনে আনুন এবং আপনার পাঠ্য প্রবেশ করান। টেক্সট সম্পত্তি ক্লিক করুন বোতামটি ফন্ট বৈশিষ্ট্যাবলী খুলতে এবং আপনার পাঠ্য বিন্যাস করতে। যদি আপনি ডামি পাঠ্যের একটি ব্লকের প্রয়োজন হয় তবে একটি পাঠ্য উপাদান যুক্ত করুন এবং ক্লিক করুন জেনারেট লোরেম আইপসুম ফন্ট বৈশিষ্ট্য বোতাম।

09 এর 06

একটি UXPin পৃষ্ঠাতে একটি চিত্র কিভাবে যুক্ত করবেন

এই কাজটি সম্পন্ন করার কয়েকটি উপায় আছে। আপনি ব্যবহার করতে পারেন চিত্র টুল টুলবারে, লাইব্রেরি থেকে একটি চিত্র উপাদান যুক্ত করুন অথবা উপরে প্রদর্শিত হিসাবে নকশা পৃষ্ঠায় উপাদানটিতে আপনার ডেস্কটপ থেকে কেবল একটি চিত্র টানুন এবং ড্রপ করুন।

09 এর 07

একটি UXPin পৃষ্ঠাতে একটি বোতাম যোগ করতে কিভাবে

একটি বাটন উপাদান আছে যদিও, " বোতাম " মধ্যে অনুসন্ধান ক্ষেত্রটি উপরে দেখানো হিসাবে, সমস্ত লাইব্রেরি পাওয়া সমস্ত বোতাম খোলে। নকশা পৃষ্ঠায় আপনার জন্য কাজ করে এমন একটি টেনে আনুন এবং রঙ, ফন্ট এবং এমনকি সীমানা ব্যাসার্ধ পরিবর্তন করতে বৈশিষ্ট্যগুলি ব্যবহার করুন। বোতামের ভিতরে লেখাটি পরিবর্তন করতে, পাঠ্যতে একবার ক্লিক করুন এবং নতুন পাঠ্য প্রবেশ করান।

09 এর 08

একটি UXPin পৃষ্ঠায় ইন্টারঅ্যাক্টিভিটি কিভাবে যুক্ত করবেন

এটি প্রথম প্রদর্শিত হতে পারে হিসাবে জটিল নয়। ইমেল ইনপুটের জন্য, আমি একটি ইনপুট উপাদান যুক্ত করেছি, এটি পুনঃআকৃত করেছি, পাঠ্যটি প্রবেশ করেছি এবং পাঠ্য বিন্যাস করেছি। ইনপুট উপাদান নির্বাচিত সঙ্গে বৈশিষ্ট্য বাটন ক্লিক করুন এবং, যখন উপাদান বৈশিষ্ট্য প্রদর্শিত ক্লিক করুন দৃষ্টিপাত বোতাম - আইপ্যাবল - প্যানেলে উপরের ডানদিকে।

বাটন নির্বাচন করুন এবং ক্লিক করুন মিথস্ক্রিয়া বাটন - বিদ্যুৎ বাজ - বৈশিষ্ট্য। যখন ইন্টারেকশন প্যানেল খোলে, নতুন ইন্টারঅ্যাকশন নির্বাচন করুন। ট্রিগার থেকে পপ ডাউন ক্লিক করুন। অ্যাকশন এলাকাতে এলিমেন্ট দেখান নির্বাচন করুন। আপনাকে এখন কোন উপাদানটি দেখানো হবে তা জিজ্ঞাসা করা হবে। Gunsite একবার ক্লিক করুন এবং ইনপুট উপাদান ক্লিক করুন। উপাদান চিহ্নিত সঙ্গে, আপনি এখন উপাদান অ্যানিমেশন কিনা তা নির্ধারণ করতে পারেন। এই ক্ষেত্রে আমি ইনপুট বাক্সটি সহজে দিয়ে দেখানোর সিদ্ধান্ত নিয়েছিলাম এবং ডিফল্ট সময়কাল 300ms এর সাথে গিয়েছিলাম।

আমি এটি ক্লিক করার সময় 65 পিক্সেলের ডানদিকে বাটনটি সরানোতে চাই। আমি বোতাম নির্বাচন করে, ইন্টারেকশন প্যানেল খোলা এবং নির্বাচিত নতুন মিথস্ক্রিয়া। আমি এই সেটিংস ব্যবহার

• ট্রিগার: ক্লিক
• কর্ম: দ্বারা সরানো
• দিকনির্দেশ সরান: এক্স অক্ষে 65 পিএক্স
• অ্যানিমেশনলিনিয়ার
• স্থিতিকাল: 300 মি

একটি মিথস্ক্রিয়া অপসারণ করতে উপাদান নির্বাচন করুন এবং ইন্টারেকশন প্যানেল খুলুন। প্যানেলে মিথস্ক্রিয়া নির্বাচন করুন এবং মুছে ফেলতে ট্র্যাশ ক্যান এ ক্লিক করুন।

09 এর 09

UXPin এ আপনার পৃষ্ঠাটি কিভাবে পরীক্ষা করবেন

কারণ আপনি ব্রাউজারে কাজ করছেন, টেস্টিং মৃত সহজ। ক্লিক করুন ডিজাইন ডিজাইন বোতাম। পৃষ্ঠা ব্রাউজারে খুলবে এবং আপনি উপায় পরীক্ষা করতে পারেন। পৃষ্ঠার বাম দিকে যোগ করা একটি প্যানেলও থাকবে যা মন্তব্যের জন্য অনুমতি দেয়, একটি সাইট ম্যাপ যদি একাধিক পৃষ্ঠা থাকে, ব্যবহারযোগ্যতা পরীক্ষা, লাইভ ভাগ, সম্পাদনা এবং ড্যাশবোর্ডে ফেরত আসে।

পৃষ্ঠার নীচে আরেকটি ছোট প্যানেল যা আপনাকে ইন্টারেক্টিভ উপাদানগুলি দেখায়, মন্তব্য প্রদর্শন করে বা গোপন করে এবং অন্যদের সাথে প্রকল্প লিঙ্কটি ভাগ করে নেওয়ার অনুমতি দেয়।